浏览器中的事件循环与Node中的事件循环

浏览器中的事件循环

1. JS线程读取并执行JS代码
2. 执行JS代码的过程中，指定异步的操作给对应的线程处理
3. 异步线程处理完毕之后，讲对应的回调函数推入任务队列
4. JS线程执行完毕之后，查询任务队列，取一个任务推入JS线程运行
5. 重复2-4

1. 浏览器中的事件循环.png

2. 浏览器结构.png

macrotask queue宏任务队列(有多个)：Ajax请求、绑定事件的回调函数、定时器的回调函数...
microtask queue微任务队列(只有一个)：promises、Object.observe、MutationObserver...

console.log('脚本开始');

setTimeout(() => {
  console.log('进入setTimeout1回调函数');
}, 0);

setTimeout(() => {
  console.log('进入setTimeout2回调函数');
  Promise.resolve().then(() => {
    console.log('进入promise2回调函数');
    Promise.resolve().then(() => {
      console.log('进入promise3回调函数');
    });
    console.log('promise2回调函数结束');
  });
  setTimeout(() => console.log('进入setTimeout3回调函数'), 0);
}, 0);

Promise.resolve().then(() => {
  console.log('进入promise1回调函数');
});

console.log('脚本结束');

执行结果

脚本开始
脚本结束
进入promise1回调函数
进入setTimeout1回调函数
进入setTimeout2回调函数
进入promise2回调函数
promise2回调函数结束
进入promise3回调函数
进入setTimeout3回调函数

执行流程：
一、查询宏任务队列，取一个执行，把脚本执行当作一个宏任务来看待
二、查询微任务队列，全部执行完毕，包括当前微任务队列执行时产生的新的微任务

Node中的事件循环

Node的组成

3. Node组成.png

执行步骤

定时器阶段：setTimeout/setInterval
等待回调阶段：执行某些系统操作的回调，TCP错误处理
闲置阶段、准备阶段：只在内部使用
轮询阶段：I/O 回调
检查阶段：setImmediate
关闭回调阶段：关闭类的回调，socket.on('close',...)

示例图

1. Node中的事件循环完整版.png

注意事项：process.nextTick > promise

每个阶段都有自己的先进先出队列，当事件循环进入到该阶段，就会执行指定的队列，直到队列被耗尽，或者达到回调的最大数量
在进入到每一个阶段之前，都会执行NextTick队列和微任务队列，前者优先级更高

// process.nextTick、promise、setImmediate、setTimeout优先级比较

// 事件循环的各阶段执行队列任务之前，会先复制当前时间的该阶段的队列
// 事件循环的各阶段执行队列任务，直到队列耗尽或者达到上限
// 进入各阶段之前，会执行微任务队列(nextTick队列和promise队列)
Promise.resolve().then(() => console.log('promise1'));
Promise.resolve().then(() => {
  console.log('promise2');
  Promise.resolve().then(() => console.log('promise in promise'));
});
Promise.resolve().then(() => {
  console.log('promise3');
  process.nextTick(() => console.log('next tick in promise'));
});
Promise.resolve().then(() => console.log('promise4'));
Promise.resolve().then(() => console.log('promise5'));

// 宏任务里边的宏任务总是会放到下一轮询，微任务立即执行？
setImmediate(() => console.log('immediate1'));
setImmediate(() => {
  console.log('immediate2');
  process.nextTick(() => console.log('next tick in immediate'));
  Promise.resolve().then(() => {
    console.log('promise in immediate');
    process.nextTick(() => console.log('next tick in promise in immediate'));
  });
  setImmediate(() => console.log('inner immediate'));
});

// 如果上面的Promis里面加个Promise试一下
process.nextTick(() => console.log('next tick1'));
process.nextTick(() => {
  console.log('next tick2');
  process.nextTick(() => console.log('inner next tick'));
});
process.nextTick(() => console.log('next tick3'));

setTimeout(() => {
  console.log('timeout');
  // 是在执行第一个定时器回调的时候添加到队列的，不是一开始就在队列
  setTimeout(() => console.log('inner timeout'), 0);
}, 0);

setImmediate(() => console.log('immediate3'));
setImmediate(() => console.log('immediate4'));

执行结果

next tick1
next tick2
next tick3
inner next tick
promise1
promise2
promise3
promise4
promise5
promise in promise
next tick in promise
timeout
immediate1
immediate2
immediate3
immediate4
next tick in immediate
promise in immediate
next tick in promise in immediate
inner timeout
inner immediate