浏览器与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
转载自:https://segmentfault.com/a/1190000041783940