JS中事件循环中的任务队列(macrotask microtask)

前言

最近已经开始在老项目中使用ES6编写代码,从ES6原生的模块导入到方便的模板字符串、解构赋值都给开发页面带来了不一样的感觉。当然还有await,async的出现彻底解决了javascript异步事件模型带来的困扰,本文用图文来解释javascript事件循环中存在的各个任务队列,更进一步理解事件循环。(本文需要对js事件循环有一定基础)

Promise对象

299425.png

这是一张js执行时示意图,上图中,主线程运行的时候,产生堆(heap)和栈(stack),栈中的代码调用各种外部API,它们在"任务队列"中加入各种事件(click,load,done)。只要栈中的代码执行完毕,主线程就会去读取"任务队列",依次执行那些事件所对应的回调函数。 在ES5年代,我们要添加往任务队列里面添加事件回调,常用的手段就是setTimeout,ajax等 如这段代码,无论执行多少次,输出的结果一定是10,理由见图

var number = 10;
setTimeout(function(){// 加入任务队列里面的
    number = 20;
})
console.log(num); //10

在es6中,加入了一个新的对象promise,使得我们可以使用promise将事件回调加入任务队列中,如

let number = 10;
new Promise((resolve)=>{
    number = 30;
    resolve();   
})
    .then(()=>{ // 加入任务队列里面的
        number=20;
    })
console.log(number); // 30

macrotask与microtask

刚才说到,一般情况,我们要往任务队列里面加入事件回调,一般可以通过setTimeout以及Promise对象的then方法,那么他们有什么区别呢?看一下下面的代码

var number = 10;
setTimeout(()=>{
   number+=10; // 20+=10
   console.log(number);  //30
})
new Promise((resolve)=>resolve()).then(()=>{
   number = 20;
   console.log(number); // 20
})

setTimeout中的log以及then中的log分别会打印30以及20,无论调用多少次,promise中的then总是会先执行,把他们的执行顺序更换后也是一样的。

var number = 10;
new Promise((resolve)=>resolve()).then(()=>{
   number = 20;
   console.log(number); // 20
})
setTimeout(()=>{
   number+=10; // 20+=10
   console.log(number);  //30
})

为什么会出现这样的现象?这就要从JS中两种不同的任务队列说起,我们知道,在事件循环中,当主线程任务栈执行完成后,会读取任务队列依次执行,任务队列在其中分为两种macrotask && microtask,这两种队列会因为不同的api来生成,具体如下

macrotasks: setTimeout setInterval setImmediate I/O UI渲染

microtasks: Promise process.nextTick Object.observe MutationObserver

那么,他们有什么区别呢?我们来看看一个完整的js执行流程

  1. 检查macrotask队列,选择其中最早加入(即最老的)的任务X,设置为“目前运行的任务”。如果任务X不存在,那么直接跳到步骤4。

  2. 运行任务X,即运行对应的回调函数。

  3. 设置“目前运行的任务”为null,从macrotask队列中移除任务X。

  4. 检查microtask队列:

    1. 选择其中最老的任务a,如果任务a不存在,直接结束microtask队列。
    2. 设置任务a为“目前运行的任务”,并执行。
    3. 设置“目前运行的任务”为null,从Microtask队列中移除任务a。
    4. 选择下一个最老的任务b,跳到步骤ii
    5. 直到队列里没有剩余的任务,结束队列。 5.跳回步骤1,检查下一个macrotask任务。

如图:

v2-ad1a251cb91d37625185a4fb874494fc_hd.jpg

上面是一次简单的事件循环的流程图,我们代入下面一段代码进行看看

<script>
var number = 10;
setTimeout(()=>{
   number+=10; // 50+=10
   console.log(number);  //60
})
new Promise((resolve)=>resolve()).then(()=>{
   number = 20;
   console.log(number); // 20
   new Promise(()=>resolve().then()=>{
       number = 50;
       console.log(number), //50
   })
   setTimeout(()=>{
       number+=20; // 60+=20   
       consol.log(number) //80
   })
})
</script>

  1. 用户执行script,整个script其实是一个macrotask,故执行里面的方法 移除(对应上面流程2)
  2. 发现setTimeout,放入下一个macrotask中 移除(对应上面流程2)
  3. 发现Promise.then,放入microtask中移除(对应上面流程2)
  4. 当前运行任务为null,移除(对应上面流程3)
  5. 检查microtask,发现存在promise回调 (对应上面任务4.i
  6. 执行promise回调,发现promise,将其放入microtask,发现setTimeout,将其放入 另外一个macrotask中,这时候还存在2个未执行的macrotask (对应上面4.ii,4.iii
  7. 执行下一个microtask,即number=50对应上面4.iiii
  8. 发现没有microtask了,结束队列 (对应上面4.v
  9. 执行下一个macrotask,即(number+=10;)
  10. 顺序执行,发现不存在microtask,返回第一步(对应上面的2,3,4,5
  11. 执行下一个macrotask,即(number+=20;)
  12. 任务全部执行完成

参考文章

HTML系列:macrotask和microtask

推荐阅读更多精彩内容