事件循环机制==人脑执行?
任何一个前端都知道JS是单线程的,并且大多听说过或者背过它的事件循环机制:Event Loop。但想理解JS的事件循环机制还是要费一番功夫的。实际上,由于人脑一次只能思考一件事情,也可以当做单线程机制。我们完全可以把JS当做一个人来看待,我们暂且叫它程序员小王吧。通过理解小王一天的行为逻辑,我们便可以很好的理解JS的事件循环是怎么一回事了。
在JS的事件循环机制中,把JS要执行的代码分为宏任务和微任务。其中像setTimeout,页面渲染这种被称为宏任务;而promise,callback回调这种被称为微任务。同样的,在小王的世界里,一些重要的任务,需要按时完成的任务,如领导安排的任务、排好期的需求,我们可以将其称之为宏任务,而收到了需要回复的消息,去楼下拿外卖等这些相对不急的任务,或者说是可以较快完成的任务,我们称之为微任务。这样小王就有了两个任务列表了。
小王每日上班开始,就从自己的宏任务列表里拿出一个任务,比如做需求的第一步,完成一个组件,开始做了起来。这时候需求还没有做完,女朋友小美给小王发来了消息,让小王拍一个自己在公司的照片,但是小王这时候不想打开手机,小王就把这个任务放到了微任务列表里了,在做需求的过程中,不断的有小事积累,比如测试说要发一下测试环境。
30分钟过后,小王的组件宏任务完成。于是,小王将其自己微任务列表里任务全部拿了出来,按照顺序依次做完了,顺便去了卫生间,接了杯开水。将这一切全部做完,小王又看了看自己的宏任务列表里,约好了和领导的汇报,于是小王把这件任务拿出来,去和领导沟通去了。这期间,小王的工作信息持续不断的发来,都被小王放到了微任务列表里,同时领导交代一会儿有空要找产品讨论上线的事情。和领导沟通完,小王把刚刚积累的微任务列表里的事情全部拿出来做完了。然后再从宏任务里拿出一个任务。。。
相信你一定可以总结出小王的做事方式了吧:先做一个宏任务,然后将微任务列表里的事情全部拿出来做完,然后再拿出一个宏任务去做,如此一般,循环往复。当然,JS也是这么运行的!通过这样的事件循环机制,JS将单线程的性能调度做到最佳,既能保证浏览器较快的响应重要的事件,又不至于导致卡顿。
启示:将不重要的事情放入微任务列表里
在平时的工作生活中,我们很难专心的去做一件事,因为我们总是被别人打断。试想这样一个场景:当下定决心,做好计划,对自己做好宣言,觉得自己时间充分,一定能够心无旁骛的做成某件事的时候。结果总是,计划的很美好,一开始就出了问题,因为很有可能这时候会有人找我们处理事情。或者手机上弹出的某个消息,我们打开手机,然后就停不下来了,一直刷到厌倦为止。对于程序员来说,这个问题往往更加凸显。
工作和生活中,我已经遇到了无数次这样的情况了。结果往往就是一天看起来很忙,结果又好像什么都没做,时间在各种事务中流失殆尽。思考一下,为什么会出现这个问题呢?我发现,每次我被别人打断,或者被想起来的某项事情打断,放下手头的事情开始去做其他事情的时候,往往再忙完其他事情回头的时候忘记做之前的事情。因为这个时候心理往往沉浸在上个事项完成或者未完成的庆祝或者反思之中,这种计划外的思考往往会浪费很多时间。
我们的生活中的事项处理也可以参考JS事件渲染。当我们在做一件事情的时候,其他没做的事情处于挂起状态,如何这时候有其他事项来临的时候,如果是小的事项,我们可以将其收集起来,先不做,存到我们的微任务栈里。如果来了一个较大的任务,预计会花费大量时间,我们就将其存到宏任务栈里。每做一件事情,我们就将存在微任务栈里的小任务一次性完成,如果这时候我们发现小任务变成了大任务,我们就可以将其放到宏任务里。做完上一次积累的微任务,我们就从宏任务栈里取出一个事项去做,循环往复,直到所有的事项都可以完成!
通过不断的训练,如果我们的大脑能够适应JS的事件循环机制,最终达到这样处理事情方式,相信你的每一天将会异常充实、高效,变得更强!