事件环eventloop开餐厅版本总结

Posted 2021-04-30 业火之理的数据分享

背景

• 由于前面写的一篇【javascript】手写Promise分步骤超详尽解答(超越PromiseA+标准)中提到event loop，然后那个文章里没写详细，并且网上很多教程忽略了版本问题，特此来总结下。

• 由于直接说可能太枯燥了容易忘，我总结成开餐厅版本。

概念

一、事件环顺序问题

• 首先，我这有3家餐厅，一家叫node10，一家叫node12，一家叫浏览器。

• 这3家餐厅每家都雇了一位服务员(单线程)。

• 餐厅名字为node开头的2家菜跟浏览器餐厅的菜略有不同（有几个特殊的api别家没有）。

• 这几家餐厅都开了个VIP包间区（微任务队列），和普通用餐区（宏任务队列），但上菜方式略有不同：

• node10和node10以上的餐厅上菜流程有略微区别：

• 正常情况下，三家餐厅在主厨做完菜（主线程完成）后，先不管别人到底点了多少菜（其他宏任务），优先服务VIP，把VIP菜上完。这点都没问题。

• 但是有个别普通区的人点菜要求多，上来的菜不满意，回去要求加工成水准赶上VIP的，这个菜实际就变成了VIP菜（宏任务执行完成后创建微任务）。这时候，三家对待这种菜的态度就不一样了。

• node10餐厅会把这次普通区（这个普通区实际是下一段写的一个循环里的某一个分类菜的队列）菜上完后再去上这道VIP菜，而node12和浏览器会不等普通区处理完，优先把这道VIP菜完成，再去处理普通区的。

• node系列餐厅的坑爹套餐是一大特色，node专门把普通区的菜分为3种：普通套餐（setTimeout等），坑爹套餐1（fs等io操作），坑爹套餐2（setImmediate）。

• 坑爹套餐1是自助餐性质，每个人胃口不一样，所以需要时间不定。

• 主厨有个习惯，做每轮普通区菜都有顺序，先去做普通套餐，再去做坑爹套餐1，再去做坑爹套餐2。然后还给顺序起个名字，做普通套餐叫Timer，做坑爹套餐1叫pull，做坑爹套餐2叫check。

• 当有人点菜后，主厨会按先后顺序做，由于3种菜第一轮主厨听到顺序不一定，就算等待时间写0实际也可能要先上的菜实际排在后面，所以第一轮循环3种菜谁先谁后都不一定。

• 但是主厨做完坑爹套餐1后，有胖子觉得坑爹套餐1不过瘾，要再加个坑爹套餐2和普通套餐（fs操作创建setImmediate与setTimeout），这时候如果已经没别的普通区的餐了，主厨必然先去做坑爹套餐2，再去做普通套餐。

• 如果有顾客吃完普通套餐，觉得普通套餐不过瘾，再要干个普通套餐加坑爹套餐2（setTimeout创建setTimeout和setImmediate）。那么主厨也是必然先做坑爹套餐2，再做普通套餐。

• 结合主厨做菜习惯和上面2个例子，可以发现实际再做的那个普通套餐已经排入下一次循环了，但是坑爹套餐2还在本次循环，所以必然是先做坑爹套餐2。

• 浏览器餐厅则没那么多讲究，普通区的菜一视同仁，VIP菜始终最优先。

二、部分细节

• 看一下菜单：

• VIP（微任务）：Promise.then/mutationObesrve（process.nextTick是node才有的）

• 普通区（宏任务）：setTimeout、setInterval、setTmmediate(只兼容ie)、messageChannel

• setTimeout等计时是等时间到了后才放入队列，并不是时间还没到就放入队列。本文有点混淆宏任务队列概念，但实际跟文中执行基本一样。

三、代码例子

1 、验证每个事件循环的每个阶段里（这里指Timer阶段），微任务是等Timer完成后执行还是完成前执行

setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});
setTimeout(() => {
  console.log(6);
})

• 这个有很少可能6会跑到2前面，但是如果打印2，6，3，说明是等Timer执行完才执行微任务，也就是node11版本以下（不包括node11）。

• 如果打印2，3，6表明每次有微任务都优先执行微任务，也就是浏览器和node11以上。

2、验证每轮循环里setImmediate是否在Timer和pull后

const fs = require('fs')
fs.readFile('./b.js',(err,data)=>{
    setTimeout(() => {
        console.log('1');
    }, 0);
    setImmediate(()=>{
        console.log('2');//优先
    });
})

setTimeout(() => {
    setTimeout(() => {
        console.log('1');
    }, 0);
    setImmediate(()=>{
        console.log('2');//优先
    },0)
}, 0);

• 这2段代码本质其实一个意思，就是在宏任务里的Timer已经执行过了，会走check运行setImmediate，没走的setTimeout放到了下一轮循环。