浏览器与Node.js中的事件环浏览器与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中的所有宏任务执行完成后就会依次切换队列
在完成队列切换之前会先清空微任务代码

案例代码

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中setimmediatesetTimeout(() => { 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"); }); });

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