进击的JavaScript之再临「EventLoop」城下

vlambda
2022-02-23

进击的JavaScript之再临「EventLoop」城下

先来复习几个知识点

异步任务的类型（Web APIs）

宏任务（macro-task）：这个队列由事件触发线程维护

setTimeout队列=>

setInterval队列=>

setImmediate队列=>

MessageChannel=>

resquestAnimationFrame=>

I/O队列=>

UI交互事件=>

...

微任务（micro-task）：这个队列由JS引擎线程维护（因为它是在主线程下无缝执行的）

process.nextTick队列=>

Promise.then队列=>

Await=>

MutationObserver=>

...

函数调用栈（call stack）

JavaScript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列(task queue)来搞定另外一些代码的执行。无论是宏任务还是微任务，最终都是被拿到函数调用栈中执行（后进先出原则）。

事件循环（Event Loop）

“javascript引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕，主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码…，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件循环（Event Loop）”

(图网上找的，懒得画了🤷‍♂️)

从一些不得不面对的🌰来理解事件循环机制

// 🌰.1
console.log("每");

setTimeout(function () {
  console.log("身");

  Promise.resolve().then(() => {
    console.log("不");
  });

  new Promise(function (resolve) {
    console.log("体");
    resolve();
  }).then(function () {
    console.log("生");
  }).then(function () {
    console.log("锈");
  });

}, 10);//进入WebApis进程（事件触发线程），10s后放入任务队列，在第二轮宏任务中执行

setTimeout(function () {
  console.log("次");
}, 0);//进入WebApis进程（事件触发线程），0s后放入任务队列，在第二轮宏任务中执行

Promise.resolve().then(() => {
  console.log("动");
});

new Promise(function (resolve) {
  console.log("周");
  resolve("_gagaga_");
}).then(function (res) {
  console.log("两");
  return res;
});

//结果：每 周 动 两 Promise {<fulfilled>: '_gagaga_'} 次 身 体 不 生 锈

逐行解释：看完保证豁然开朗

首先，函数执行栈执行整体代码块script 遇到console.log("每")，立即执行，输出 每；遇到第一个setTimeout，这是一个异步任务的宏任务，由WebApis进程（事件触发线程），10ms后它的第一个参数会被放进任务队列，将在第二轮宏任务中被执行；遇到第二个setTimeout，与上一个类似，区别是0ms后它就会被放进任务队列；此时setTimeout微任务队（左进右出，先进先出）列情况：10ms的settimeout，0ms的settimeout；遇到第一个Promise，Promise.resolve()内无代码可执行，遇到.then，这是一个微任务，将.then里的代码加入到Promise微任务队列；遇到第二个Promise，new Promise的第一个参数会立即执行，输出 周；遇到.then，这是本轮循环遇到的第二个微任务，将.then里的代码加入到Promise微任务队列（左进右出，先进先出）；此时Promise微任务队列里的情况：console.log("两") , console.log("动")；

至此，本（第一）轮无宏任务需要执行，开始执行本轮产生的微任务。首先从微任务队列头部取出console.log("动")执行，输出 动，并从微任务队列中清除；再取出console.log("两")执行，输出 两，并从微任务队列中清除。此时微任务队列已无待执行任务，本轮循环结束，开始下一轮事件循环。

新一轮循环依然从宏任务队列开始执行：发现setTimeout宏任务队列有任务可以执行，从队头取出0ms的settimeout的任务执行，输出 次；再取出10ms的settimeout的任务执行，输出 身；且执行过程中遇到第一个Promise，Promise.resolve()内无代码可执行，遇到.then，这是一个微任务，将.then里的代码加入到Promise微任务队列；遇到第二个Promise，new Promise的第一个参数会立即执行，输出 体；遇到.then，这是本轮循环遇到的第二个微任务，将.then里的代码加入到Promise微任务队列，又遇到.then，这是本轮循环遇到的第三个微任务，将.then里的代码也加入到Promise微任务队列（左进右出，先进先出）；此时Promise微任务队列里的情况：console.log("锈") console.log("生") , console.log("不")；

至此，本（第二）轮无宏任务需要执行，开始执行本轮产生的微任务。首先从微任务队列头部取出console.log("不")执行，输出 不，并从微任务队列中清除；再取出console.log("生")执行，输出 生，并从微任务队列中清除，最后再取出console.log("锈")执行，输出 锈，并从微任务队列中清除。此时微任务队列已无待执行任务，本轮循环结束，开始下一轮事件循环。

新一轮循环依然从宏任务队列开始执行：发现宏任务队列中已无任务可以执行，循环结束；

这个例子的注意点：第一轮循环，遇到两个setTimeout，到了第二轮谁先执行呢？当然是延迟小的先执行。主线程之外，事件触发线程管理着一个任务队列（或消息队列），倒计时结束后，setTimeout的第一个参数会被放入宏任务队列，所以倒计时先结束的就会先放进去，当第二轮循环执行宏任务的时候也就会先执行。

// 🌰.2

console.log('start');
setTimeout(function() { //setTimeout1
    console.log('setTimeout1');
    process.nextTick(function() {
        console.log('nextTick1'); //nextTick1
    })
    new Promise(function(resolve) {// Promise1
        console.log('Promise1');
        resolve();
    }).then(function() {
        console.log('Promise1.then')
    })
})
new Promise(function(resolve) { //Promise2
    console.log('Promise2');
    resolve();
}).then(function() {
    console.log('Promise2.then')
})

setTimeout(function() {  //setTimeout2
    console.log('setTimeout2');
    process.nextTick(function() { //nextTick2
        console.log('nextTick2');
    })
    new Promise(function(resolve) {  //Promise3
        console.log('Promise3');
        resolve();
    }).then(function() {
        console.log('Promise3.then')
    })
})

// start Promise2 Promise2.then setTimeout1 Promise1 nextTick1 Promise1.then setTimeout2 Promise3 nextTick2 Promise3.then

// 🌰.3
console.log('golb1');

setTimeout(function() {
    console.log('timeout1');
    process.nextTick(function() {
        console.log('timeout1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout1_promise');
        resolve();
    }).then(function() {
        console.log('timeout1_then')
    })
})

setImmediate(function() {
    console.log('immediate1');
    process.nextTick(function() {
        console.log('immediate1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate1_promise');
        resolve();
    }).then(function() {
        console.log('immediate1_then')
    })
})

process.nextTick(function() {
    console.log('glob1_nextTick');
})
new Promise(function(resolve) {
    console.log('glob1_promise');
    resolve();
}).then(function() {
    console.log('glob1_then')
})

setTimeout(function() {
    console.log('timeout2');
    process.nextTick(function() {
        console.log('timeout2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout2_promise');
        resolve();
    }).then(function() {
        console.log('timeout2_then')
    })
})

process.nextTick(function() {
    console.log('glob2_nextTick');
})
new Promise(function(resolve) {
    console.log('glob2_promise');
    resolve();
}).then(function() {
    console.log('glob2_then')
})

setImmediate(function() {
    console.log('immediate2');
    process.nextTick(function() {
        console.log('immediate2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate2_promise');
        resolve();
    }).then(function() {
        console.log('immediate2_then')
    })
})

//执行结果：golb1, glob1_promise, glob2_promise, glob1_nextTick, glob2_nextTick, glob1_then, glob2_then, timeout1, timeout1_promise, timeout1_nextTick, timeout1_then, timeout2, timeout2_promise, timeout2_nextTick, timeout2_then, immediate1, immediate1_promise, 
immediate1_nextTick, immediate1_then, immediate2, immediate2_promise, immediate2_nextTick, immediate2_then

这个参考来的栗子比较复杂，这里需要注意的点是：process.nextTick和promise.then都是微任务，但是process.nextTick的优先级比promise.then要高，因此会先执行。

// 🌰.4 有await

console.log('script start');//宏任务1
async function async1() {
    await async2();
    console.log('async1 end');//微任务1
}

async function async2() {
    console.log('async2 end');//宏任务2
}
async1()

setTimeout(function() {
    console.log('setTimeout');//宏任务2
}, 0)

new Promise(resolve => {
    console.log('Promise');//宏任务3
    resolve()
}).then(function() {
    console.log('promise1');//微任务2
}).then(function() {
    console.log('promise2');//微任务3
})
console.log('script end');//宏任务4 //先执行完await后面的函数async2后（async2后面的console.log('async1 end')可以理解为进入到了微任务队列里），然后跳出当前async1函数，执行async1外面的同步代码，同步代码执行完，再回到async内部，最后在执行console.log( 'async1 end' )；

这个栗子的注意点：对于async/await函数，可以将紧跟着await后的代码当作立即执行函数（同步任务），await的下一行当作promise.then，即产生一个微任务。

分析过程（啰嗦点）

执行script代码块

遇到宏任务：将任务添加到对应的宏任务队列中

•遇到setTimeout，将setTimeout回调内容添加到setTimeout队列中；•遇到setImmediate，将setImmediate回调内容添加到SetImmediate队列中；

遇到微任务：将任务添加到对应的微任务队列中

•遇到process.nextTick：将回调内容添加到nextTick队列中；•遇到Promise：Promise里是立即执行函数，所以里面的代码会立即执行；Promise.then回调添加到Promise队列中；

当前宏任务执行完毕

开始执行当前宏任务所产生的微任务

•先执行nextTick队列，过程中遇到其他宏任务/微任务重复上面的逻辑•再执行Promise队列，过程中遇到其他宏任务/微任务重复上面的逻辑

所有微任务执行完毕，本轮循环结束，开始下一轮事件循环，再次从宏任务队列开始执行

•先执行setTimeout队列，过程中遇到其他宏任务/微任务重复上面的逻辑（执行过程中，若遇到微任务，加入到对应微任务队列，然后先将微任务队列中任务执行完毕，再返回执行其他setTimeout任务）•再执行setImmediate队列，过程中遇到其他宏任务/微任务重复上面的逻辑（执行过程中，若遇到微任务，加入到对应微任务队列，然后先将微任务队列中任务执行完毕，再返回执行其他setImmediate任务）

重复（先执行宏任务，再执行宏任务产生的微任务，UI Render）流程，直到所有宏任务执行完毕，函数执行栈清空，事件循环结束。

简而言之（参考大佬的总结，并加入了UI渲染的触发时机）

执行一个宏任务（函数执行栈中没有就从事件队列中获取）
执行过程中如果遇到微任务，就将它添加到微任务的任务队列中(先进先出原则)
宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

再多说一嘴，加深记忆

setTimeout 需要等待当前队列中所有的消息都处理完毕之后才能执行，即使已经超出了由第二参数所指定的时间
当在执行setTimeout任务中遇到setTimeout时，它仍然会将对应的任务分发到setTimeout队列中去，但是该任务就得等到下一轮事件循环执行了；
setTiemout队列产生的微任务执行完毕之后，循环则回过头来开始执行setImmediate队列。仍然是先将setImmediate队列中的任务执行完毕，再执行所产生的微任务；
当setImmediate队列执行产生的微任务全部执行之后，第二轮循环也就结束了；
在node环境下，process.nextTick的优先级高于Promise，也就是可以简单理解为：在宏任务结束后会先执行微任务队列中的nextTickQueue部分，然后才会执行微任务中的Promise部分。

参考

并发模型与事件循环 MDN^[1]

深入核心，详解事件循环机制^[2]

EventLoop 事件循环机制详解^[3]

References

[1] 并发模型与事件循环 MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop
[2] 深入核心，详解事件循环机制: https://segmentfault.com/a/1190000012646373
[3] EventLoop 事件循环机制详解: https://www.icode9.com/content-4-806163.html

vlambda博客
学习文章列表