js执行机制：event loop（多图理解）

[pekonchan]

是什么

我们都知道js是单线程运行，那么在单线程进程中具体如果执行js的脚本，你或许还不清晰，那么该文章你就得看下去了。

js脚本（任务）的执行遵循一个机制：event loop，中文称为“事件循环”吧。顾名思义，表示的是周而复始不断循环执行任务事件的一个过程机制

这个机制主要是为了实现如何在js单线程运行的大背景下实现异步，避免出现脚本阻塞的情况。

在说明这个机制之前，我们先了解一下基础的概念，方便之后的理解

任务的区分

同步与异步任务

我们知道任务可以划分为同步任务和异步任务，我这里不说具体标准的定义，通俗说一下其意思。

同步任务：能马上被执行的，按照一定顺序依次被执行的任务

异步任务：等到一定触发时机发生了，才会被执行对应的操作，并不是马上就执行

宏任务与微任务

• macro-task（宏任务）：

整体的script、setTimeout、setInterval、I/O、ui渲染、setImmediate（用法参考）

以上脚本操作产生的是宏任务，可能有些资料把宏任务称呼为task

• micro-task（微任务）：

Promise的方法，如then等、process.nextTick(Node.js)、MutationObserve（用法参考）

注意，在微任务中，process.nextTick的触发顺序会比其他微任务要先执行

以上脚本操作产生的是微任务

任务执行流程

js是单线程运行的，只有一个进程在执行着脚本任务，即主线程，那什么任务才会进入主线程呢，这是由一个叫call stack（调用栈/执行栈）的家伙来处理的。

从宏观上看，event loop就是这么一个循环

从宏任务队列中找到最开始的任务，此刻是有微任务，如果有，则执行完毕后执行此刻所有的微任务，执行完重新回到宏任务队列中找最开始的任务执行（原先的最开始任务已经出队了，原本排第二的任务现变成最开始的任务了）；若无，也是重新回到宏任务队列中找最开始的任务执行；然后按照刚才的顺序再循环一遍。

以上这个循环不断周而复始的过程就是event loop了

那么，从什么时候就已经划分好宏任务和微任务呢，即宏任务和微任务的队列是如何产生呢？看下面这个图先大体感受一下

上面的图我画的较其他资料都要仔细点，是个详细版的事件循环流程图。

我们可以看到，在异步操作的触发时机发生时，就会把任务入队，入哪个队呢，就按照我上面说的，是什么样的脚本产生就归属哪类（如setTimeout产生的是宏任务）

这里的event table可以理解成是一个注册机构，用来注册异步操作的回调函数的。

因为我们说了，整体script脚本也算是一个宏任务，所以进入页面，执行最初始的脚本时就算是开始了从宏任务开头的事件循环这么一个过程了。

如果上面的图你还是不太理解，或许你需要了解一下call stack的一些原理。

call stack原理

这里有一份叫main.js的代码：

 var firstFunction = function(){
     console.log("I'm first!");
 };
 var secondFunction = function(){
     firstFunction();
     console.log("I'm second!");
 };
 secondFunction();

以这份代码为例子举例说明。

• 当第一次执行main.js时，调用栈的初始初始状态是这样的（上也说了，script脚本算是一个宏任务）：

• 当调用secondFunction时，此刻调用栈情况：

• 在secondFunction里还调用了firstFunction，此刻调用栈：

• 当执行完了firstFunction:

• 同样，执行完了secondFunction之后，就算执行完了main.js这个宏任务了，所以会有以下变化：

---

以上是调用栈的执行原理。。

请结合原理和上面详细版的事件循环好好理解当中的过程。

练习理解

以这份代码为例子，按照上述描述的过程，判断输出顺序

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

分析思路：

1. 执行同步任务，输出了1
2. 代码走到第一个setTimeout，产生第一个宏任务
3. 代码走到process.nextTick，产生1个微任务
4. 代码走到new Promise，执行同步任务输出了7，并产生了一个微任务(then方法)
5. 代码走到第二个setTimeout，产生第二个宏任务
6. 代码走完了，此刻是已经执行完了该script代码，第一个宏任务完了。此刻有一个宏任务队列，由两个setTimeout任务构成，有一个微任务队列，由process.nextTick和promise.then任务构成。
7. 按照event loop流程，宏任务执行完就执行所有微任务，process.nextTick是较其他微任务优先的，先输出6，接着输出8
8. 执行新的宏任务，在宏任务队列中执行最开始入队的宏任务，即第一个setTimeout，执行里面的同步任务，输出2和4，并产生了两个微任务
9. 新的宏任务执行完了（第一个setTimeout），执行此刻的所有微任务，输出3、5
10. 开始新的宏任务（第二个setTimeout），执行里面的同步脚本，输出9、11。同样的，产生了两个微任务
11. 执行微任务，输出10、12

所以最终的输出顺序是1-7-6-8-2-4-3-5-9-11-10-12

最后

我这里没有过多的用文字述说很多，因为其实那个详细版的那个流程图就已经把最关键的说出来了，大家好好体会那个图，结合最后的例子。

这里说的主要是js客户端的event loop ，关于node.js服务器端的event loop是不同的，这里就不在这里叙述说了。