【前端100问】Q24：浏览器和 Node 事件循环的区别

写在前面

此系列来源于开源项目：前端 100 问：能搞懂 80%的请把简历给我
为了备战 2021 春招
每天一题，督促自己
从多方面多角度总结答案，丰富知识
浏览器和 Node 事件循环的区别
简书整合地址：前端 100 问

正文回答

其中一个主要的区别在于浏览器的 event loop 和 nodejs 的 event loop 在处理异步事件的顺序是不同的,nodejs 中有 micro event;其中 Promise 属于 micro event 该异步事件的处理顺序就和浏览器不同.nodejs V11.0 以上 这两者之间的顺序就相同了.

function test() {
  console.log("start");
  setTimeout(() => {
    console.log("children2");
    Promise.resolve().then(() => {
      console.log("children2-1");
    });
  }, 0);
  setTimeout(() => {
    console.log("children3");
    Promise.resolve().then(() => {
      console.log("children3-1");
    });
  }, 0);
  Promise.resolve().then(() => {
    console.log("children1");
  });
  console.log("end");
}

test();

// 以上代码在node11以下版本的执行结果(先执行所有的宏任务，再执行微任务)
// start
// end
// children1
// children2
// children3
// children2-1
// children3-1

// 以上代码在node11及浏览器的执行结果(顺序执行宏任务和微任务)
// start
// end
// children1
// children2
// children2-1
// children3
// children3-1

其他的回答

题目可以修改为：浏览器和 node 的事件循环的区别

参考一个文章：浏览器与 Node 的事件循环(Event Loop)有何区别?

浏览器

关于微任务和宏任务在浏览器的执行顺序是这样的：

• 执行一只 task（宏任务）
• 执行完 micro-task 队列 （微任务）

如此循环往复下去

浏览器的 task（宏任务）执行顺序在 html#event-loops 里面有讲就不翻译了
常见的 task（宏任务） 比如：setTimeout、setInterval、script（整体代码）、 I/O 操作、UI 渲染等。
常见的 micro-task 比如: new Promise().then(回调)、MutationObserver(html5 新特性) 等。

Node

Node 的事件循环是 libuv 实现的

大体的 task（宏任务）执行顺序是这样的：

• timers 定时器：本阶段执行已经安排的 setTimeout() 和 setInterval() 的回调函数。
• pending callbacks 待定回调：执行延迟到下一个循环迭代的 I/O 回调。
• idle, prepare：仅系统内部使用。
• poll 轮询：检索新的 I/O 事件;执行与 I/O 相关的回调（几乎所有情况下，除了关闭的回调函数，它们由计时器和 setImmediate() 排定的之外），其余情况 node 将在此处阻塞。
• check 检测：setImmediate() 回调函数在这里执行。
• close callbacks 关闭的回调函数：一些准备关闭的回调函数，如：socket.on('close', ...)。

微任务和宏任务在 Node 的执行顺序

Node 10 以前：

• 执行完一个阶段的所有任务
• 执行完 nextTick 队列里面的内容
• 然后执行完微任务队列的内容

Node 11 以后：
和浏览器的行为统一了，都是每执行一个宏任务就执行完微任务队列。