【JS】1034- Event Loop ：你知道它们的打印顺序吗？

╰+攻爆jí腚メ 2022-09-02 05:23 82阅读 0赞

![79fa591398b1aed565588fcb22cfda5d.png][]

### 前言 ###

在 《浏览器知识点整理（十三）不同的回调执行时机：宏任务和微任务》\[1\] 这篇文章的后面有几道打印面试题，觉得不够过瘾，于是又找了一些对应的面试题来，还在不同的 Node.js 版本上面跑了跑，希望你也能过过瘾。

先来回顾一下浏览器 Event Loop 的过程：

*  先执行 **当前调用栈中的同步代码**（一个宏任务）；
 *  **调用栈为空后去检查是否有异步任务（微任务）需要执行**；
 *  如果有则 **执行完当前异步代码**（当前宏任务中微任务队列里的所有微任务），
 *  再之后就是 **从消息队列中取出下一个宏任务** 去执行（重新维护一个调用栈），然后开始新一轮的 Event Lopp。

然后不同版本的 Node.js 的一个 Event Loop 区别：

*  如果是 **Node 10 及其之前版本**：宏任务队列当中有几个宏任务，是要等到宏任务队列当中的所有宏任务全部执行完毕才会去执行微队列当中的微任务。
 *  如果是 **Node 11 及之后版本**：一旦执行一个阶段里对应宏队列当中的一个宏任务(`setTimeout`，`setInterval` 和 `setImmediate` 三者其中之一，不包括 I/O)就立刻执行微任务队列，执行完微队列当中的所有微任务再回到刚才的宏队列执行下一个宏任务。这就 **跟浏览器端运行一致** 了。

为了过这个瘾，我意用 `nvm` （`nvm install 10.13.0`）安装了 `10.13.0` 版本的 Node.js

![33f64d271616ea46c01fb595070f8ebb.png][] image.png

参赛选手主要是宏任务代表 `setTimeout` 和微任务扛把子 `Promise` 及新贵 `async/awiat` 。

### 基础版本 ###

首先是单个任务的版本：

`setTimeout`：

console.log('script start');
    setTimeout(() =>  {
      console.log('setTimeout1')
    }, 100)
    setTimeout(() =>  {
      console.log('setTimeout2')
    }, 50)
    console.log('script end');
    复制代码

在 Chrome 中有一个 **`ProcessDelayTask` 函数**，该函数会根据发起时间和延迟时间计算出到期的任务，然后依次执行这些到期的任务。执行顺序如下：

![b6f1780a71c94216129bab7abce3953a.png][] image.png

`Promise`：

console.log('script start');
    new Promise((resolve) =>  {
      console.log('promise1');
      resolve();
      console.log('promise1 end');
    }).then(() => {
      console.log('promise2');
    })
    console.log('script end');
    复制代码

在 `Promise` 内部是 **同步执行** 的，所以会有以下打印顺序：

![0f5ba4b7f9f9bd4fe2d37452a4adf15e.png][] image.png

`async/awiat`：

async function async1() {
      console.log('async1 start')
      await async2();
      console.log('async1 end')
    }
    async function async2() {
      console.log('async2')
    }
    console.log('script start')
    async1();
    console.log('script end')
    复制代码

执行顺序如下，这里需要注意的是 `async2` 函数也是同步执行的。

![3720c06176928a037c53af6b4f6905e1.png][] image.png

以上的基础版本就是同步和异步的区别了，因为是单个任务，也没有其它复杂的场景，在 Node.js 中的表现和浏览器是一样的。

### 组合版本一（`setTimeout` 和 `Promise`） ###

console.log('script start');
    setTimeout(() =>  {
      console.log('setimeout');
    }, 0)
    new Promise((resolve) =>  {
      console.log('promise1');
      resolve();
      console.log('promise1 end');
    }).then(() => {
      console.log('promise2');
    })
    console.log('script end');
    复制代码

在 Chrome 中的执行顺序：

![fa451cd2449c012be7a2f08a4c23bda6.png][] image.png

这个版本就是简单的宏任务 `setTimeout` 和微任务 `Promise` 的组合了，因为也就一个宏任务和一个微任务，它在不同版本中的 Node.js 里面表现也是和在浏览器一样的。

### 组合版本二（`setTimeout` 和 `Promise`、`async`/`await`） ###

console.log('script start')
    async function async1() {
      console.log('async1 start')
      await async2()
      console.log('async1 end')
    }
    async function async2() {
      console.log('async2')
    }
    async1()
    new Promise(resolve => {
      console.log('promise1 start')
      resolve()
      console.log('promise1 end')
    }).then(() => {
      console.log('promise2')
    })
    console.log('script end')
    复制代码

在 Chrome 中的执行顺序：

![eb149a5ce18ebb061f974c214482c1ed.png][] image.png

在 Node.js `10.13.0` 中的执行顺序：

![aa77c1aed0daed8d3a3b81934ba79b82.png][] image.png

在 Node.js `12.18.3` 中的执行顺序：

![a3f2784251b2923944132b686c2ad8b4.png][] image.png

惊不惊喜！意不意外！Chrome（91版本）和 Node.js `12.18.3` 的版本表现是一致的，在 Node.js `10.13.0` 版本中有些差异，主要是 `promise2` 和 `async1 end` 打印顺序的不同，也就是说 `async/await` 在不同版本的 Node.js 处理是不一样的（Chrome 70 后和 Chrome 70 前的处理也不一样）。

想要搞清楚其中的区别，可以去 promise, async, await, execution order\[2\] 一探究竟。

### 混合版本一（`setTimeout` 和 `Promise`） ###

console.log('script start')
    setTimeout(() => {
      console.log('setTimeout1')
      Promise.resolve().then(() => {
        console.log('promise1')
      })
    }, 0)
    setTimeout(() => {
      console.log('setTimeout2')
      Promise.resolve().then(() => {
        console.log('promise2')
      })
    }, 0)
    console.log('script end')
    复制代码

在 Chrome 中的执行顺序：

![1e5fb428a89d34c190f521d33098f7ce.png][] image.png

在 Node.js `10.13.0` 中的执行顺序：

![92b26cd28584fb63767ee27cc6bfa293.png][] image.png

在 Node.js `12.18.3` 中的执行顺序：

![1a2dca628b40ddfbb393b940dac768d8.png][] image.png

这个混合版本主要是看 Node.js 版本 10 前后 Event Loop 的差别。

### 混合版本二（`setTimeout` 和 `Promise`） ###

`setTimeout` 和 `Promise`：

console.log('script start')
    Promise.resolve().then(() => {
      console.log('promise1')
      setTimeout(() => {
        console.log('setTimeout1')
      }, 0)
    })
    setTimeout(() => {
      console.log('setTimeout2')
      Promise.resolve().then(() => {
        console.log('promise2')
      })
    }, 0)
    console.log('script end')
    复制代码

在 Chrome 中的执行顺序：

![27801b96de188f872e0acc7740cbe148.png][] image.png

在 Node.js `10.13.0` 中的执行顺序：

![967e4de45111211024d8dcb7b41f8b6a.png][] image.png

在 Node.js `12.18.3` 中的执行顺序：

![b7102b5d8cf2e6e12aae3e8e60451a23.png][] image.png

这个版本是执行完同步代码（`script end`）后，这时候第一个 `Promise`（`promise1`） 在微任务队列里面，第二个 `setTimeout` 已经加到消息队列（延迟队列）尾部了；这时候去执行微任务，即打印 `promise1`，然后把第一个 `setTimeout` 加到消息队列（延迟队列）尾部，所以会是先打印 `setTimeout2`、`promise2` 之后再打印 `setTimeout1`。

### 混合版本三（`Promise`） ###

宏任务和微任务的组合混合都差不多了，那来看看微任务之间的混合吧！

async function async1() {
      console.log('async1 start');
      Promise.resolve(async2()).then(() => {
        console.log('async1 end');
      })
    }
    async function async2() {
      console.log('async2');
      Promise.resolve(async3()).then(() => {
        console.log('async2 end');
      })
    }
    async function async3() {
      console.log('async3');
      Promise.resolve().then(() => {
        console.log('async3 end');
      })
    }
    console.log('script start');
    async1();
    new Promise((resolve) =>  {
      console.log('promise1');
      resolve();
    }).then(() => {
      console.log('promise2');
    });
    console.log('script end');
    复制代码

在 Chrome 中的执行顺序：

![461c73a25f850505cd3698b37a584f07.png][] image.png

在 Node.js `10.13.0` 中的执行顺序：

![2b3f593eeb45fd44298606e3f50a33bb.png][] image.png

这个也容易理解，按照调用栈的出入栈顺序，先执行的是同步代码，执行到 `async3` 的时候才把 `async3 end` 加入微任务队列，之后 `async3()` 函数出栈，回到 `async2`，把 `async2 end` 加入微任务队列，后面的同理，于是就有了这个打印顺序。

### 混合版本四（`Promise` 和 `async`/`await`） ###

async function async1() {
      console.log('async1 start');
      await async2();
      console.log('async1 end');
    }
    async function async2() {
      console.log('async2');
      await async3()
      console.log('async2 end')
    }
    async function async3() {
      await console.log('async3');
      console.log('async3 end')
    }
    console.log('script start');
    async1();
    new Promise((resolve) => {
      console.log('promise1');
      resolve();
    }).then(() => {
      console.log('promise2');
    });
    console.log('script end');
    复制代码

在 Chrome 中的执行顺序：

![70276b049bf2bf8581b10b07d95ad6bf.png][] image.png

在 Node.js `10.13.0` 中的执行顺序：

![37479b69165cc77158ecdcf1a86da5c0.png][] image.png

版本四和版本三的区别是将 `async` 函数里面的 `Promise` 换成了 `await`，而且版本三中的 `async` 函数里面没有 `await`，都可以把 `function` 前面的 `async` 标记拿掉的，不要被迷惑了哦。

在同步代码执行到 `script end` 之前我想都没什么问题，`async` 里面都是有 `await` 的，所以在后面的代码可以理解为如下形式：

Promise.resolve().then(() => {
      console.log('async3 end');
      Promise.resolve().then(() => {
        console.log('async2 end');
        Promise.resolve().then(() => {
          console.log('async1 end');
        })
      })
    })
    Promise.resolve().then(() => {
      console.log('promise2');
    })
    复制代码

### 混合版本五（`Promise` 和 `async`/`await`） ###

function async1() {
      console.log('async1 start');
      Promise.resolve(async2()).then(() => {
        console.log('async1 end');
      })
    }
    function async2() {
      console.log('async2');
      Promise.resolve(async3()).then(() => {
        console.log('async2 end');
      })
    }
    async function async3() {
      await console.log('async3');
      console.log('async3 end');
    }
    console.log('script start');
    async1();
    new Promise(function (resolve) {
      console.log('promise1');
      resolve();
    }).then(function () {
      console.log('promise2');
    });
    console.log('script end');
    复制代码

在 Chrome 中的执行顺序：

![633881b9fb9867e17329b54922c5accd.png][] image.png

在 Node.js `10.13.0` 中的执行顺序：

![4c5c1dd3ebb017833f99c6c784ea63d3.png][] image.png

通过前面版本四的考验，这里应该也难不倒你，这里只有 `async3` 里面有一个 `await`，执行到 `script end` 之前都一样，到了 `async3 end` 后面的代码可以转化为以下形式思考：

Promise.resolve().then(() => {
      console.log('async3 end');
      Promise.resolve().then(() => {
        console.log('async2 end');
      })
    })
    Promise.resolve().then(() => {
      console.log('async1 end');
    })
    Promise.resolve().then(() => {
      console.log('promise2');
    })
    复制代码

### 总结 ###

纸上得来终觉浅，绝知此事要躬行。

关于本文

# 来源：起风了Q #

https://juejin.cn/post/6979244116199047204

![8df81dda7fa34a01d2d79d1b3dfcb56d.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![d11486a5bb77257b4c8b899056d1a068.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[79fa591398b1aed565588fcb22cfda5d.png]: /images/20220829/c4de2381bb33490f93d89fc6c55a172c.png
[33f64d271616ea46c01fb595070f8ebb.png]: /images/20220829/2ca486f698264392ac2c49d980cd2dfa.png
[b6f1780a71c94216129bab7abce3953a.png]: /images/20220829/a5e84c06685e442ea09a556c213dd6dc.png
[0f5ba4b7f9f9bd4fe2d37452a4adf15e.png]: /images/20220829/2e16717d9f324f9c81e6308f5ec4ebc7.png
[3720c06176928a037c53af6b4f6905e1.png]: /images/20220829/ed563a0019fb4629b93fecc4bbd1374e.png
[fa451cd2449c012be7a2f08a4c23bda6.png]: /images/20220829/95eabad188a9422abb9dfcb8e60f396a.png
[eb149a5ce18ebb061f974c214482c1ed.png]: /images/20220829/73f2a2e04dcd4050bc430402cf725fad.png
[aa77c1aed0daed8d3a3b81934ba79b82.png]: /images/20220829/eaa9dbb870c94f929c1942e699112c23.png
[a3f2784251b2923944132b686c2ad8b4.png]: /images/20220829/312edf3590304f79862778dc2deef5d0.png
[1e5fb428a89d34c190f521d33098f7ce.png]: /images/20220829/0fc7837543c14cb2bc3c9df3feaeaf93.png
[92b26cd28584fb63767ee27cc6bfa293.png]: /images/20220829/6d6c2ce62af44f4c89bd96d8ee022199.png
[1a2dca628b40ddfbb393b940dac768d8.png]: /images/20220829/51307dfa13554fd4a485a1f5a3c61914.png
[27801b96de188f872e0acc7740cbe148.png]: /images/20220829/2aca3f6b491644c1a8abfcce1e16d725.png
[967e4de45111211024d8dcb7b41f8b6a.png]: /images/20220829/46039f5981fe4edf9232d75778965644.png
[b7102b5d8cf2e6e12aae3e8e60451a23.png]: /images/20220829/5a1358a92e9b4780ae094f005a1edd14.png
[461c73a25f850505cd3698b37a584f07.png]: /images/20220829/1637dee721464d44936291e6d09f9e2b.png
[2b3f593eeb45fd44298606e3f50a33bb.png]: /images/20220829/33393ab1dd3a40f4a3fe602904042a66.png
[70276b049bf2bf8581b10b07d95ad6bf.png]: /images/20220829/926b3eb121e545769ac948a46df27bde.png
[37479b69165cc77158ecdcf1a86da5c0.png]: /images/20220829/c811f8d9dd2143038202b7a48eb4794d.png
[633881b9fb9867e17329b54922c5accd.png]: /images/20220829/aaa86a08a3e54951b4a68f8b837cbd1f.png
[4c5c1dd3ebb017833f99c6c784ea63d3.png]: /images/20220829/5c9d2485e6ae40b299bc52818a89111b.png
[8df81dda7fa34a01d2d79d1b3dfcb56d.gif]: /images/20220829/b01eeb396c14481f8851d32e2b45198e.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[d11486a5bb77257b4c8b899056d1a068.gif]: /images/20220829/2c400e7621a6484398cd7b7b6cc1db7e.png

【JS】1034- Event Loop ：你知道它们的打印顺序吗？

发表评论取消回复

还没有评论，来说两句吧...

相关阅读