浏览器与Node.js中的事件环

浏览器中的事件环，完整事件环执行顺序

• 从上至下执行所有同步代码
• 执行过程中遇到的宏任务与微任务添加至相应的队列
• 同步代码执行完毕后，执行满足条件的微任务回调。
• 微任务队列执行完毕后执行所有满足需求的宏任务回调
• 循环事件环操作
• 每执行一个宏任务之后就会立刻检查微任务队列

setTimeout(() => {
  console.log("s1");
  Promise.resolve().then(() => {
    console.log("p1");
  });
  Promise.resolve().then(() => {
    console.log("p2");
  });
});

setTimeout(() => {
  console.log("s2");
  Promise.resolve().then(() => {
    console.log("p3");
  });
  Promise.resolve().then(() => {
    console.log("p4");
  });
});

// 打印
s1
p1
p2
s2
p3
p4

Node.js下的事件环

• timers:执行setTimeout与setInterval回调
• pending callbacks:执行系统操作的回调，例如tcp udp
• idle,prepare:只在系统内部进行使用
• poll:执行与IO相关的回调
• check:执行setImmediate中的回调
• close callbacks:执行close事件的回调
• 执行同步代码，将不同的任务添加至相应的队列
• 所有同步代码执行后回去执行满足条件微任务
• 所有微任务代码执行后会执行timer队列中满足的宏任务
• timer中的所有宏任务执行完成后就会依次切换队列
• 在完成队列切换之前会先清空微任务代码

 ┌───────────────────────────┐
┌─>│ timers │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ pending callbacks │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ idle, prepare │
│ └─────────────┬─────────────┘ ┌───────────────┐
│ ┌─────────────┴─────────────┐ │ incoming: │
│ │ poll │<─────┤ connections, │
│ └─────────────┬─────────────┘ │ data, etc. │
│ ┌─────────────┴─────────────┐ └───────────────┘
│ │ check │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
└──┤ close callbacks │
 └───────────────────────────┘
每个框被称为事件循环机制的⼀个阶段。
每个阶段都有⼀个 FIFO 队列来执⾏回调。
虽然每个阶段都是特殊的，但通常情况下，当事件循环进⼊给定的阶段时，
它将执⾏特定于该阶段的任何操作，然后执⾏该阶段队列中的回调，
直到队列⽤尽或最⼤回调数已执⾏。
当该队列已⽤尽或达到回调限制，事件循环将移动到下⼀阶段，等等。

加入微任务
 ┌───────────────────────────┐
 │ 同步代码 │
 └─────────────┬─────────────┘
 ┌───────────────────────────┐
 │ process.nextTick │
 │ promise.then() │
 └─────────────┬─────────────┘
 ┌───────────────────────────┐
┌─>│ timers │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ pending callbacks │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ idle, prepare │
│ └─────────────┬─────────────┘ ┌───────────────┐
│ ┌─────────────┴─────────────┐ │ incoming: │
│ │ poll │<─────┤ connections, │
│ └─────────────┬─────────────┘ │ data, etc. │
│ ┌─────────────┴─────────────┐ └───────────────┘
│ │ check │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
└──┤ close callbacks │
 └───────────────────────────┘

案例代码

setTimeout(() => {
  console.log("s1");
});

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

console.log("start");

process.nextTick(() => {
  console.log("tick");
});

setImmediate(() => {
  console.log("setimmediate");
});

console.log("end");

打印
start
end
tick
p1
s1
setimmediate

// 1,setTimeout存入timer中
// 2，promise进入微任务队列
// 3,输出start
// 4,nextTick进入微任务队列
// 5，setImmediate进入check队列中
// 6，输出end
// 7，微任务中的tick优先级高于promise，先输出tick，后输出p1
// 8,查看timer，输出s1
// 9，查看poll，poll为空，查看check
// 10，输出check中setimmediate

setTimeout(() => {
  console.log("s1");
  Promise.resolve().then(() => {
    console.log("p1");
  });
  process.nextTick(() => {
    console.log("t1");
  });
});

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

console.log("start");

setTimeout(() => {
  console.log("s2");
  Promise.resolve().then(() => {
    console.log("p3");
  });
  process.nextTick(() => {
    console.log("t2");
  });
});

console.log("end");
打印
start
end
p2
s1
t1
p1
s2
t2
p3

nodejs与浏览器事件环差异

• 任务队列数不同，浏览器只有两个队列，nodejs中有6个事件队列
• 微任务执行时机不同，二者都会在同步代码执行完之后执行微任务，浏览器平台下每当一个宏任务执行完毕后就清空微任务，nodejs平台在事件队列切换时会去清空微任务。
• 微任务优先级不同，浏览器事件环中，微任务存放于事件队列，先进先出，Nodejs中的process.nextTick先于promise.then

Nodejs事件环常见问题

setTimeout(() => {
  console.log("timeout");
},0);

setImmediate(() => {
  console.log("immdieate");
});

快速执行时，他们的打印顺序可能会交换，setTimeout与setImmediate执行随机，setTimeout有延时。

const fs = require("fs");
fs.readFile("./m1.js", () => {
  setTimeout(() => {
    console.log("timeout");
  }, 0);

  setImmediate(() => {
    console.log("immdieate");
  });
});

在I/O操作的回调中，他们的打印顺序固定，先打印immdieate再打印timeout。事件环中I/O回调在poll队列中执行之后查看微任务队列后切换到check中执行setImmediate，才会切换到timer中执行setTimeout