vlambda博客
学习文章列表

事件环eventloop开餐厅版本总结

背景

  • 由于前面写的一篇【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放到了下一轮循环。