深入理解Event Loop的运行机制

一、Event Loop是什么

Event Loop即事件循环，是指浏览器或Node.js的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。
Event Loop是一个执行模型，在不同的地方有不同的实现，浏览器和Node.js基于不同的技术实现了各自的Event Loop。

二、宏任务和微任务

宏任务，macrotask，也叫tasks。一些异步任务的回调会依次进入macrotask queue，还有一部分会进入其他的队列，等待后续被调用，这些异步任务包括：

setTimeout
setInterval
setImmediate(Node和最新版本IE独有)
I/O
requestAnimationFrame
requestIdleCallback

微任务，microtask, 也叫jobs。另一些异步任务的回调会依次进入microtask queue，等待后续被调用，这些异步任务包括：

process.nextTick(Node独有)
Promise.then
Object.observe
MutationObserver
(注：这里只针对浏览器和Node.js)

三、Event Loop运行机制

浏览器的Event Loop的执行过程：

执行全局script的同步代码。
执行微任务队列中的所有任务。
开始执行macrotask宏任务，从宏任务队列中取一个任务出来执行，然后又执行所有的微任务，执行的流程为：执行一个宏任务 -> 步骤2 -> 执行一个宏任务 -> 步骤2 -> 执行一个宏任务…

Node.js的Event Loop的执行过程：

执行全局script的同步代码。
执行所有microtask微任务，先执行Next Tick Queue中的所有任务，从Next Tick Queue中依次取出任务放入调用栈中执行，再执行Other Microtask Queue中的所有任务，也是从Other Microtask Queue中依次取出任务放入调用栈中执行。
开始执行macrotask宏任务，共6个阶段，从第1个阶段开始执行相应每一阶段macrotask中的所有任务（在浏览器的Event Loop中是每次只取宏任务队列中的一个任务出来执行，然后又执行所有的微任务），每一个阶段的macrotask执行完毕后，又开始执行所有微任务，执行的流程为：Timers Queue -> 步骤2 -> I/O Queue -> 步骤2 -> Check Queue -> 步骤2 -> Close Callback Queue -> 步骤2 -> Timers Queue …

注意：在较新版本11.0中， Node.js为了向浏览器靠齐，对底部进行了修改，Node11及之后版本已经把在timer阶段的setTimeout,setInterval…和在check阶段的setImmediate都修改为一旦执行完一个阶段里的一个任务就立刻执行微任务队列。

四、细节特性

NodeJS中微任务有两种，分别是process.nextTick和promise.then，那么这两个谁先执行呢？

 Promise.resolve(‘123’).then(res=>{console.log(res)})
 Process.nextTick(()=>{console.log(‘nextTick’)})
 // 运行结果：
 // nextTick 
 // 123

解释：
promise.then虽然和process.nextTick一样，都将回调函数注册到microtask微任务中，但优先级不一样，process.nextTick的microtask queue总是优先于promise的microtask queue执行。

setTimeout和setImmediate
在Node中，setTimeout和setImmediate执行顺序不固定取决于Node的准备时间。

 setTimeout(() => {
    console.log(‘setTimeout’)
 }, 0)
 setImmediate(() => {
    console.log(‘setImmediate’)
 })
 // 运行结果：
 // setImmediate
 // setTimeout
 // 或者
 // setTimeout
 // setImmediate

解释：
setTimeout/setInterval的第二个参数取值范围是：[1, 2^31 - 1]，如果超过这个范围则会初始化为1，即setTimeout(fn, 0) === setTimeout(fn, 1)。
我们知道setTimeout的回调函数在timer阶段执行，setImmediate的回调函数在check阶段执行，Event Loop开始会先检查timer阶段，但是在开始之前到timer阶段会消耗一定时间，所以就会出现两种情况：
1.timer前的准备时间超过1ms，满足loop(time >= 1)，则执行timer阶段（setTimeout）的回调函数
2.timer前的准备时间小于1ms，则不满足loop(time < 1)，会先执行check阶段（setImmediate）的回调函数，下一次Event Loop执行timer阶段（setTimeout）的回调函数。

五、面试题解析

 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');
    })
 })

 new Promise(function(resolve){
    console.log('6');
    resolve();
 }).then(function(){
    console.log('7');
 })

 process.nextTick(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');
    })
 })

 console.log('13');

问：将以上代码放在Node环境中（v11.0以下）运行，打印结果是什么？
答：1 6 13 8 7 2 4 9 11 3 10 5 12

解析：先执行同步代码，new Promise中的函数的代码是同步代码，Promise.then方法中函数的代码才是异步的，所以第一轮循环同步代码打印结果为：1 6 13，然后再看第一轮循环的微任务，微任务总是会追加到本轮循环的末尾执行，微任务中先执行process.nextTick，再执行Promise.then,所以第一轮循环打印结果为：1 6 13 8 7，此时第一轮微任务全都执行完了，就该进入第二轮循环执行宏任务了，宏任务分6个阶段，这里只有Timer，所以打印结果为：1 6 13 8 7 2 4 9 11，然后执行第二轮的微任务，最后的打印结果为：1 6 13 8 7 2 4 9 11 3 10 5 12。

六、总结

1.Promise构造函数里的代码是同步执行的，Promise.then里的代码才是异步的。
2.不同环境中Event Loop的运行机制不同，所以不同环境中JS的运行结果也有可能不一致。
3.Node.js可以理解成有4个宏任务队列和2个微任务队列，但是执行宏任务时有6个阶段。

结语：这篇文章中只是介绍了像setTimeout和setInterval这些进入macrotask queue队列的宏任务的执行顺序，想要了解更多，比如requestAnimationFrame和requestIdleCallback的执行时机，可以看我的另一篇文章（requestAnimationFrame和requestIdleCallback是宏任务还是微任务)，希望本文章能对你有所帮助，文中有哪里不对的地方，欢迎大家指正，最后感谢大家的支持。