Javascript核心知识之灵魂画手绘制eventloop事件轮询机制

最新推荐文章于 2023-11-03 21:23:27 发布
最新推荐文章于 2023-11-03 21:23:27 发布
阅读量265 收藏 5
点赞数 6
分类专栏： JavaScript 文章标签： javascript event loop 事件轮询 前端面试 JavaScript核心
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yolanda_NuoNuo/article/details/118918050
版权
本文探讨了JavaScript中的事件循环(event loop)机制，解释了为何JavaScript是单线程以及如何通过回调实现异步。文章介绍了关键概念如执行栈、Web APIs、回调队列，并通过代码示例详细解析了事件轮询的过程，包括setTimeout函数的工作方式。最后，作者预告将要讨论宏任务和微任务以及结合DOM操作的面试题目。
摘要由CSDN通过智能技术生成

传说中前端面试必考的异步问题—eventloop机制，又来总结一下～
身为笔记狂魔的阿婆主整理了好多好多笔记，多到令人发指！！！后面会慢慢发出来分享～
像JavaScript的异步是就是一大块，要说清楚，显得有条不紊，还是要花费一点时间再整理一下的～

一、event loop是啥子
1、event loop指的是事件循环/事件轮询的机制
像我们这种还做后端的小可爱们，会在发现JS是单线程语言的时候，小小的脑阔里充满了大大的疑问
（1）JS为毛是单线程的呢？
（2）那JS是怎么实现异步的呢？
2、自问自答～
（1）JS是单线程是因为它是浏览器脚步语言，有DOM渲染的，而且共用一个线程
（2）基于回调来实现异步啦～而event loop就是异步回调的实现原理
3、好了，懒得再写了
可以看下这个再丰富一下自己的知识
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop
http://www.ruanyifeng.com/blog/2014/10/event-loop.html

二、直接上图吧
来一个简单的小片段分析一下

console.log(
最低0.47元/天 解锁文章
Yolanda_NuoNuo
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
js中的 Event loop（事件循环）
qq_49841234的博客
03-18 1779
文章目录执行栈与事件队列macro task(宏任务) 与micro task(微任务)node.js提供的异步函数process.nextTick()和setImmediate()总结 我们都知道js是一个 单线程的非阻塞的语言，那么js的运行机制是怎样的呢？让我们通过本篇文章来学习一下吧 执行栈与事件队列 我们都知道js中有同步代码也有异步代码，其中执行栈就是用来存放同步代码的，；js自上向下按顺序执行时，遇到同步代码就将其存入到执行栈中，遇到异步代码如定时器时，js并不会等到其执行完毕而是将其存放到
JS-线程、事件循环、任务队列
anleng6817的博客
01-02 322
JS 是单线程的，但是却能执行异步任务，这主要是因为 JS 中存在事件循环（Event Loop）和任务队列（Task Queue）。 事件循环： JS 会创建一个类似于 while (true) 的循环，每执行一次循环体的过程称之为 Tick。每次 Tick 的过程就是查看是否有待处理事件，如果有则取出相关事件及回调函数放入执行栈中由主线程执行。待处理的事件会存储在一个任务队列中，也就...
JS的Event-Loop
07-11 122
javascript中的Event-Loop 在之前的一篇文章中我们解释了一下为什么JavaScript要设计成单线程以及这门语言的任务队列的概念，这也帮助了我们简单了解了这门语言的运行机制，那么今天我们就谈谈任务队列相关的概念！ 事件和回调函数 任务队列其实是事件的一个队列，也可以理解为消息队列，当IO设备完成一个任务的时候，就会在任务队列中添加一个事件，用来表示当前任务已经执行完了，可以进入执...
js中的EventLoop
阿飞陛下
03-10 250
面试中最尴尬的情况大概就是当对方抛出问题时，你却不知从何说起。当问起promise和setTimeout时接下来很大程度上都会问到执行顺序，引出js的EventLoop的话题。
js中的event-loop
......
10-13 344
事件循环机制由三部分组成，调用栈、微任务队列、消息队列， 1、event-loop开始的时候，会从全局一行一行地执行，遇到函数调用，会压入到调用栈中，被压入的函数被称之为帧，当函数返回后，会从调用栈中弹出。 <script> function fun1(){ console.log(1) } function fun2(){ console.log(2) fun1() console.log(3...
【JavaScript】阶段性复习
weixin_49133874的博客
10-17 353
【JavaScript】阶段性复习View / MVVM 框架对比 React 、Angular 和 Vue相同点不同点如何实现一个组件，前端组件的设计原则是什么？VueReactCssJavaScript算法全栈 View / MVVM 框架 对比 React 、Angular 和 Vue 相同点 React 和 Vue都提供了 Virtual Dom 提供了 响应式（Reactive）和组件化（Composable）的视图组件 注意力保持在核心库，而将其他功能如路由和全局状态管理交给相关的库 不同点
前端面试问题（适用于面试回答思路）
yaminne的博客
03-28 4948
原型和原型链 原型：构造函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。也即，每个构造函数的实例都有一个原型，叫原型对象，由实例对象的内置属性_proto_指向。每个原型都有一个 constructor 属性指向关联的构造函数。 原型用法：构造函数创建的实例可以访问实例的属性和方法，也可以访问原型的属性和方法。对于原型只能访问自己的属性和方法。考虑这一特性，如果对象公有的属性和方法，我们可以添加到原型上面，对象需要的时候直接访问原型的属性和方法就可以。 当读取实
前端面试题整理
newbalsh的博客
06-07 929
工厂模式是一种设计模式，目的是为了创建对象，它通常在类或类的静态方法中实现，有以下目的：当创建相似对象是执行重复操作当编译时，不知道具体类型的情况下，为工厂客户提供一个创建对象的接口//使用工厂方式创建一个对象//1.原料//2.加工 -- 对属性进行赋值//3.方法console.log("人物名称："+this.name);console.log("人物的性别："+this.sex);//4.加工结束,--输出返回return obj;//工厂模式的使用。
html+css+js基础问答
qq_43751465的博客
08-26 5198
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
JS事件循环(Event Loop)
热门推荐
chenrongwei92的博客
10-21 1万+
为什么JavaScript是单线程？ JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？ 所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。 ...
JS的事件循环(Event Loop)
xufang461010923的专栏
09-21 3760
一、任务树。
JS中的事件循环机制(Event Loop)
qq_23858785的博客
12-20 1758
JS中的事件循环机制(Event Loop)
JavaScript：事件循环机制（EventLoop）
最新发布
snowball的博客
11-03 8235
当一个宏任务中产生了微任务，这些微任务会先被放到一个专门的队列中，等待当前宏任务执行完毕时再执行。而在执行这些微任务时，如果又产生了新的微任务，这些新的微任务会被放到队列的末尾，等待执行。当当前任务执行完成后，在下一个事件循环的开始，JavaScript会从任务队列中取出一个任务，执行该任务。然后再执行宏任务队列中的任务。总的来说，JavaScript通过事件循环机制来实现异步操作，将异步任务放到任务队列中，然后在任务队列中等待执行，直到JavaScript引擎空闲，再将任务队列中的任务拿出来执行。
JS事件循环（Event Loop）机制
曹定栓的博客
12-26 759
JS事件循环（Event Loop）机制
Js 的事件循环(Event Loop)机制以及实例讲解
weixin_34293902的博客
06-19 469
前言 大家都知道js是单线程的脚本语言，在同一时间，只能做同一件事，为了协调事件、用户交互、脚本、UI渲染和网络处理等行为，防止主线程阻塞，Event Loop方案应运而生... 个人博客了解一下：obkoro1.com 为什么js是单线程？ js作为主要运行在浏览器的脚本语言，js主要用途之一是操作DOM。 在js高程中举过一个栗子，如果js同时有两个线程，同时对同一个dom进行操作，这时...
JS学习笔记—JS 的 Event Loop
阿周的博客
04-25 137
执行栈和Event Loop 行栈是一个存储函数调用的栈结构，遵循先进后出的原则。当开始执行 JS 代码时，首先会执行一个main函数，然后执行我们的代码。根据先进后出的原则，后执行的函数会先弹出栈。 当遇到异步的代码时，会被挂起并在需要执行的时候加入到 Task（有多种 Task） 队列中。一旦执行栈为空，Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行...
js事件循环机制eventLoop
前端笔记
04-15 126
js代码的执行顺序是什么呢？ 什么是宏任务、微任务呢？ js引擎是单线程，为什么会有异步的操作呢？ 本文是对javascript事件循环机制的总结
JS 运行机制-EventLoop（事件循环）
Jermyo的博客
11-25 1545
JS 运行机制-EventLoop（事件循环） javascript 是单线程的 JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。 JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的......
事件循环机制eventloop
04-25
好的，您的问题是什么是事件循环机制eventloop？ 事件循环机制eventloop是指一种用于处理事件驱动编程的机制。在这种机制中，程序会等待事件的发生，而不是通过不断的轮询来等待某种操作的完成。当一个事件被触发时，程序将会以预设的顺序去执行这些事件，同时忽略那些不相关的或者已经过期的事件。在这个过程中，事件循环机制eventloop会不断地检查、等待或执行事件，并把这些事件分类放置到处理队列中。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值