Eventloop浅述以及宏微任务执行顺序的实战探讨

    在去年曾经做过一次分享名为<eventLoop狂欢>的对JS时间循环机制的简述.而今过了一年,对前端又新增了部分理解.今天借着靓仔奶茶威胁之缘由,再来复习一下何谓eventloop.

对笔者有所怀疑的可以参考阮一峰大师的著作 http://www.ruanyifeng.com/blog/2013/10/event_loop.html 

基本阮大师的文章,文笔过人,才华横溢,精致入微又振振有词,一篇文章就足以对eventloop全貌就有基本的了解.

先看看阮大师笔下的定义: 

阮一峰的eventloop定义

然而笔者没看.因为太长了.

本文只是基于笔者实践才是检验真理的唯一标准这以观念,来用实例阐述一下笔者眼中的eventloop.

在这里提及一下去年百度百科上的解释,这也是去年我板书用的一个解释:

百科解释(已无法找到)

现在这个词条在网上已经找不到了.主要原因就是这里提到的"先执行宏任务,然后执行微任务"这一点描述其实很有争议,从宏观上来说,如果把主程序当做一个很大的宏任务的时候,那么的确是"先宏后微",但是若论实际的可用来做开发实战指导的,实际上是"先微后宏".可以用一个小例子来轻松举证

new Promise((resolve) => {

  setTimeout(() => {

    // 以下代码点上可以看做同时将A与B压入任务队列

    // 将宏任务B入队列

    setTimeout(() => {

      console.log('宏任务B执行')

    }, 0);

    // 将微任务A入队列

    resolve()

    // 以上代码时间点上可以看做同时将A与B压入任务队列

  }, 1000);

}).then(() => {

  console.log('微任务A执行')

})

可以直接粘贴在浏览器或者在node中查看,结果都先执行微任务A,再执行宏任务B

可见在执行顺序上是微任务执行优先级 > 宏任务执行优先级

不过这只是一个比较粗浅的实践理论,要究其根本为何会出现这种现象,主要还是要围绕runTime的运行机制

以下这张图可以比较好的诠释在eventLoop中runTime到底干了什么

JS异步执行图解

但这个图也是来源于网络.无证之罪告诉我们,凡是与人相关的,都有一定的主观性.不过对于实战来说,这张图解还是有相当的意义的.

首先eventloop的机制首先目的就是为了解决JS的异步规范问题.目前的规范是在同等条件下,微任务(主要是promise的then)会凌驾于其他异步任务的执行.

在笔者的个人理解中,其实所谓的宏任务队列与微任务队列只是逻辑上的构造,执行任务的顺序,完全是取决于入栈条件的触发先后.所谓的先微后宏,不过是因为在多个异步处理模块中,微任务其实是类似于算作一个同步任务在处理,当resolve函数触发的时候,会直接把.then函数直接入栈,而其他异步操作都有依赖于某个外部模块进行,比如计时模块,网络IO模块等等.

当然,这种假说是否是正确的,且待笔者下回深入机理,验证解析.