面试率超高的JS事件循环，看这篇就够了

,大家好，我是 CUGGZ。,事件循环是 JavaScript 中一个非常重要的概念，下面就来看看浏览器和 Node.js 中的事件循环的原理，以及两者之间的差异！,我们知道，JavaScript是一种单线程语言，它主要用来与用户互动，以及操作DOM。,JavaScript 有同步和异步的概念，这就解决了代码阻塞的问题：,那单线程有什么好处呢？,JS 是单线程的，在同一个时间只能做一件事情，那为什么浏览器可以同时执行异步任务呢？,这是因为浏览器是多线程的，当 JS 需要执行异步任务时，浏览器会另外启动一个线程去执行该任务。也就是说，JavaScript是单线程的指的是执行JavaScript代码的线程只有一个，是浏览器提供的JavaScript引擎线程（主线程）。除此之外，浏览器中还有定时器线程、 HTTP 请求线程等线程，这些线程主要不是来执行 JS 代码的。,比如主线程中需要发送数据请求，就会把这个任务交给异步 HTTP 请求线程去执行，等请求数据返回之后，再将 callback 里需要执行的 JS 回调交给 JS 引擎线程去执行。也就是说，浏览器才是真正执行发送请求这个任务的角色，而 JS 只是负责执行最后的回调处理。所以这里的异步不是 JS 自身实现的，而是浏览器为其提供的能力。,下图是Chrome浏览器的架构图：,,可以看到，Chrome不仅拥有多个进程，还有多个线程。以渲染进程为例，就包含GUI渲染线程、JS引擎线程、事件触发线程、定时器触发线程、异步HTTP请求线程。这些线程为 JS 在浏览器中完成异步任务提供了基础。,JavaScript的任务分为两种同步和异步：,上面提到了任务队列和执行栈，下面就先来看看这两个概念。,执行栈：从名字可以看出，执行栈使用到的是数据结构中的栈结构， 它是一个存储函数调用的栈结构，遵循先进后出的原则。它主要负责跟踪所有要执行的代码。 每当一个函数执行完成时，就会从堆栈中弹出（pop）该执行完成函数；如果有代码需要进去执行的话，就进行 push 操作。以下图为例：,,当执行这段代码时，首先会执行一个 main 函数，然后执行我们的代码。根据先进后出的原则，后执行的函数会先弹出栈，在图中也可以发现，foo 函数后执行，当执行完毕后就从栈中弹出了。,JavaScript在按顺序执行执行栈中的方法时，每次执行一个方法，都会为它生成独有的执行环境（上下文)，当这个方法执行完成后，就会销毁当前的执行环境，并从栈中弹出此方法，然后继续执行下一个方法。,任务队列： 从名字中可以看出，任务队列使用到的是数据结构中的队列结构，它用来保存异步任务，遵循先进先出的原则。它主要负责将新的任务发送到队列中进行处理。,JavaScript在执行代码时，会将同步的代码按照顺序排在执行栈中，然后依次执行里面的函数。当遇到异步任务时，就将其放入任务队列中，等待当前执行栈所有同步代码执行完成之后，就会从异步任务队列中取出已完成的异步任务的回调并将其放入执行栈中继续执行，如此循环往复，直到执行完所有任务。,JavaScript任务的执行顺序如下：,,在事件驱动的模式下，至少包含了一个执行循环来检测任务队列中是否有新任务。通过不断循环，去取出异步任务的回调来执行，这个过程就是事件循环，每一次循环就是一个事件周期。,任务队列其实不止一种，根据任务种类的不同，可以分为微任务（micro task）队列和宏任务（macro task）队列。常见的任务如下：,任务队列执行顺序如下：,,可以看到，Eventloop 在处理宏任务和微任务的逻辑时的执行情况如下：,也是就是说，一次 Eventloop 循环会处理一个宏任务和所有这次循环中产生的微任务。,下面通过一个例子来体会事件循环：,代码输出结果如下：,那这段代码执行过程是怎么的呢？,从上面的宏任务和微任务的工作流程中，可以得出以下结论：,那么问题来了，为什么要将任务队列分为微任务和宏任务呢，他们之间的本质区别是什么呢？,JavaScript在遇到异步任务时，会将此任务交给其他线程来执行（比如遇到setTimeout任务，会交给定时器触发线程去执行，待计时结束，就会将定时器回调任务放入任务队列等待主线程来取出执行），主线程会继续执行后面的同步任务。,对于微任务，比如promise.then，当执行promise.then时，浏览器引擎不会将异步任务交给其他浏览器的线程去执行，而是将任务回调存在一个队列中，当执行栈中的任务执行完之后，就去执行promise.then所在的微任务队列。,所以，宏任务和微任务的本质区别如下：,对于Node.js的事件循环，官网的描述如下：,翻译一下就是：当Node.js启动时，它会初始化一个事件循环，来处理输入的脚本，这个脚本可能进行异步API的调用、调度计时器或调用process.nextTick()，然后开始处理事件循环。,JavaScript和Node.js是基于V8 引擎的，浏览器中包含的异步方式在 NodeJS 中也是一样的。除此之外，Node.js中还有一些其他的异步形式：,这些异步任务的执行就需要依靠Node.js的事件循环机制了。,Node.js 中的 Event Loop 和浏览器中的是完全不相同的东西。Node.js使用V8作为js的解析引擎，而I/O处理方面使用了自己设计的libuv，libuv是一个基于事件驱动的跨平台抽象层，封装了不同操作系统一些底层特性，对外提供统一的API，事件循环机制也是它里面的实现的，如下图所示：,,根据上图，可以看到Node.js的运行机制如下:,其中libuv引擎中的事件循环分为 6 个阶段，它们会按照顺序反复运行。每当进入某一个阶段的时候，都会从对应的回调队列中取出函数去执行。当队列为空或者执行的回调函数数量到达系统设定的阈值，就会进入下一阶段。下面 是Eventloop 事件循环的流程：,,整个流程分为六个阶段，当这六个阶段执行完一次之后，才可以算得上执行了一次 Eventloop 的循环过程。下面来看下这六个阶段都做了哪些事：,注意：上面每个阶段都会去执行完当前阶段的任务队列，然后继续执行当前阶段的微任务队列，只有当前阶段所有微任务都执行完了，才会进入下个阶段，这里也是与浏览器中逻辑差异较大的地方。,其中，这里面比较重要的就是第四阶段：poll，这一阶段中，系统主要做两件事：,在进入该阶段时如果没有设定了 timer 的话，会出现以下情况：,（1）如果 poll 队列不为空，会遍历回调队列并同步执行，直到队列为空或者达到系统限制。,（2）如果 poll 队列为空时，会出现以下情况：,当设定了 timer 且 poll 队列为空，则会判断是否有 timer 超时，如果有的就会回到 timer 阶段执行回调。,这一过程的具体执行流程如下图所示：,,Node.js事件循环的异步队列也分为两种：宏任务队列和微任务队列。,上面提到了process.nextTick()，它是node中新引入的一个任务队列，它会在上述各个阶段结束时，在进入下一个阶段之前立即执行。,Node.js官方文档的解释如下：,例如下面的代码：,输出结果如下：,可以看到，process.nextTick()是优先于promise的回调执行。,上面还提到了setImmediate 和 setTimeout，这两者很相似，主要区别在于调用时机的不同：,例如下面的代码：,输出结果如下：,在上面代码的执行过程中，第一轮循环后，分别将 setTimeout  和 setImmediate 加入了各自阶段的任务队列。第二轮循环首先进入timers 阶段，执行定时器队列回调，然后 pending callbacks和poll 阶段没有任务，因此进入check 阶段执行 setImmediate 回调。所以最后输出为timeout、setImmediate。###= 4. Node与浏览器事件循环的差异 Node.js与浏览器的事件循环的差异如下：,Nodejs和浏览器的事件循环流程对比如下：