面试官：说说对Node.js中的事件循环机制理解?

本文转载自微信公众号「JS每日一题」，作者灰灰。转载本文请联系JS每日一题公众号。  

创新互联建站-专业网站定制、快速模板网站建设、高性价比萨嘎网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式萨嘎网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖萨嘎地区。费用合理售后完善，10余年实体公司更值得信赖。

一、是什么

在浏览器事件循环中，我们了解到javascript在浏览器中的事件循环机制，其是根据HTML5定义的规范来实现

而在NodeJS中，事件循环是基于libuv实现，libuv是一个多平台的专注于异步IO的库，如下图最右侧所示：

上图EVENT_QUEUE 给人看起来只有一个队列，但EventLoop存在6个阶段，每个阶段都有对应的一个先进先出的回调队列

二、流程

上节讲到事件循环分成了六个阶段，对应如下：

  • timers阶段：这个阶段执行timer(setTimeout、setInterval)的回调
  • 定时器检测阶段(timers)：本阶段执行 timer 的回调，即 setTimeout、setInterval 里面的回调函数
  • I/O事件回调阶段(I/O callbacks)：执行延迟到下一个循环迭代的 I/O 回调，即上一轮循环中未被执行的一些I/O回调
  • 闲置阶段(idle, prepare)：仅系统内部使用
  • 轮询阶段(poll)：检索新的 I/O 事件;执行与 I/O 相关的回调(几乎所有情况下，除了关闭的回调函数，那些由计时器和 setImmediate() 调度的之外)，其余情况 node 将在适当的时候在此阻塞
  • 检查阶段(check)：setImmediate() 回调函数在这里执行
  • 关闭事件回调阶段(close callback)：一些关闭的回调函数，如：socket.on('close', ...)

每个阶段对应一个队列，当事件循环进入某个阶段时, 将会在该阶段内执行回调，直到队列耗尽或者回调的最大数量已执行, 那么将进入下一个处理阶段

除了上述6个阶段，还存在process.nextTick，其不属于事件循环的任何一个阶段，它属于该阶段与下阶段之间的过渡, 即本阶段执行结束, 进入下一个阶段前, 所要执行的回调，类似插队

流程图如下所示：

在Node中，同样存在宏任务和微任务，与浏览器中的事件循环相似

微任务对应有：

  • next tick queue：process.nextTick
  • other queue：Promise的then回调、queueMicrotask

宏任务对应有：

  • timer queue：setTimeout、setInterval
  • poll queue：IO事件
  • check queue：setImmediate
  • close queue：close事件

其执行顺序为：

  • next tick microtask queue
  • other microtask queue
  • timer queue
  • poll queue
  • check queue
  • close queue

三、题目

通过上面的学习，下面开始看看题目

 
 
 
 
    
  
  
  
  
  1. async function async1() { 
    2. 
  
  
  
  
  2.     console.log('async1 start') 
    3. 
  
  
  
  
  3.     await async2() 
    4. 
  
  
  
  
  4.     console.log('async1 end') 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. async function async2() { 
    8. 
  
  
  
  
  8.     console.log('async2') 
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. console.log('script start') 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13. setTimeout(function () { 
    14. 
  
  
  
  
  14.     console.log('setTimeout0') 
    15. 
  
  
  
  
  15. }, 0) 
    16. 
  
  
  
  
  16.  
    17. 
  
  
  
  
  17. setTimeout(function () { 
    18. 
  
  
  
  
  18.     console.log('setTimeout2') 
    19. 
  
  
  
  
  19. }, 300) 
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21. setImmediate(() => console.log('setImmediate')); 
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23. process.nextTick(() => console.log('nextTick1')); 
    24. 
  
  
  
  
  24.  
    25. 
  
  
  
  
  25. async1(); 
    26. 
  
  
  
  
  26.  
    27. 
  
  
  
  
  27. process.nextTick(() => console.log('nextTick2')); 
    28. 
  
  
  
  
  28.  
    29. 
  
  
  
  
  29. new Promise(function (resolve) { 
    30. 
  
  
  
  
  30.     console.log('promise1') 
    31. 
  
  
  
  
  31.     resolve(); 
    32. 
  
  
  
  
  32.     console.log('promise2') 
    33. 
  
  
  
  
  33. }).then(function () { 
    34. 
  
  
  
  
  34.     console.log('promise3') 
    35. 
  
  
  
  
  35. }) 
    36. 
  
  
  
  
  36.  
    37. 
  
  
  
  
  37. console.log('script end') 
    38.

分析过程：

  • 先找到同步任务，输出script start
  • 遇到第一个 setTimeout，将里面的回调函数放到 timer 队列中
  • 遇到第二个 setTimeout，300ms后将里面的回调函数放到 timer 队列中
  • 遇到第一个setImmediate，将里面的回调函数放到 check 队列中
  • 遇到第一个 nextTick，将其里面的回调函数放到本轮同步任务执行完毕后执行
  • 执行 async1函数，输出 async1 start
  • 执行 async2 函数，输出 async2，async2 后面的输出 async1 end进入微任务，等待下一轮的事件循环
  • 遇到第二个，将其里面的回调函数放到本轮同步任务执行完毕后执行
  • 遇到 new Promise，执行里面的立即执行函数，输出 promise1、promise2
  • then里面的回调函数进入微任务队列
  • 遇到同步任务，输出 script end
  • 执行下一轮回到函数，先依次输出 nextTick 的函数，分别是 nextTick1、nextTick2
  • 然后执行微任务队列，依次输出 async1 end、promise3
  • 执行timer 队列，依次输出 setTimeout0
  • 接着执行 check 队列，依次输出 setImmediate
  • 300ms后，timer 队列存在任务，执行输出 setTimeout2

执行结果如下：

 
 
 
 
    
  
  
  
  
  1. script start 
    2. 
  
  
  
  
  2. async1 start 
    3. 
  
  
  
  
  3. async2 
    4. 
  
  
  
  
  4. promise1 
    5. 
  
  
  
  
  5. promise2 
    6. 
  
  
  
  
  6. script end 
    7. 
  
  
  
  
  7. nextTick1 
    8. 
  
  
  
  
  8. nextTick2 
    9. 
  
  
  
  
  9. async1 end 
    10. 
  
  
  
  
  10. promise3 
    11. 
  
  
  
  
  11. setTimeout0 
    12. 
  
  
  
  
  12. setImmediate 
    13. 
  
  
  
  
  13. setTimeout2 
    14.

最后有一道是关于setTimeout与setImmediate的输出顺序

 
 
 
 
    
  
  
  
  
  1. setTimeout(() => { 
    2. 
  
  
  
  
  2.   console.log("setTimeout"); 
    3. 
  
  
  
  
  3. }, 0); 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. setImmediate(() => { 
    6. 
  
  
  
  
  6.   console.log("setImmediate"); 
    7. 
  
  
  
  
  7. }); 
    8.

输出情况如下：

 
 
 
 
    
  
  
  
  
  1. 情况一： 
    2. 
  
  
  
  
  2. setTimeout 
    3. 
  
  
  
  
  3. setImmediate 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. 情况二： 
    6. 
  
  
  
  
  6. setImmediate 
    7. 
  
  
  
  
  7. setTimeout 
    8.

分析下流程：

  • 外层同步代码一次性全部执行完，遇到异步API就塞到对应的阶段
  • 遇到setTimeout，虽然设置的是0毫秒触发，但实际上会被强制改成1ms，时间到了然后塞入times阶段
  • 遇到setImmediate塞入check阶段
  • 同步代码执行完毕，进入Event Loop
  • 先进入times阶段，检查当前时间过去了1毫秒没有，如果过了1毫秒，满足setTimeout条件，执行回调，如果没过1毫秒，跳过
  • 跳过空的阶段，进入check阶段，执行setImmediate回调
  • 这里的关键在于这1ms，如果同步代码执行时间较长，进入Event Loop的时候1毫秒已经过了，setTimeout先执行，如果1毫秒还没到，就先执行了setImmediate

参考文献

https://segmentfault.com/a/1190000012258592

https://juejin.cn/post/6844904100195205133

https://vue3js.cn/interview/

分享文章：面试官：说说对Node.js中的事件循环机制理解?
当前URL：http://www.shufengxianlan.com/qtweb/news14/214564.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

品牌网站设计知识

同城分类信息

达州网站建设　　 　做移动网站　　 　商标注册　　 　成都网站改版　　 　高端网站策划　　 　广汉锦华建材　　 　成都服务器托管　　 　成都网络推广公司　　 　固迪佳新材料　　 　网站建设公司　　 　app软件开发公司　　 　乐山托管服务器　　 　免备案虚拟主机空间　　 　成都展柜设计　　 　成都app软件开发公司　　 　成都网站制作　　 　成都主机托管　　 　手机微信网站　　 　成都标识标牌设计制作　　 　app开发公司