浏览器与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中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

你可能感兴趣的:(浏览器与Node.js中的事件环)