嘘🤫！不同环境下宏、微任务的秘密～

之前讲了个手写Promise，有人提出手写Promise很遗憾不能将promise.then写成microtask，只能用setTimeout来模拟异步，所以这次来讲一下microtask和macrotask

一、task 和 microtask

先理解一下task（宏任务又称macrotask）和microtask（微任务）。

• task有setTimeout、setInterval、setImmediate（node，IE10+）、I/O（node）、UI rendering(网页UI View渲染)等
• microtask有process.nextTick（node）、Promises.then（es6）、 Object.observe(废弃)、 MutationObserver(HTML5监听DOM变化)
• task 被放置于task queue(宏任务队列)；microtask被放置于microtask queue（微任务队列）
• 在浏览器中，通俗来讲microtask queue 独立于task queue，有microtask就先执行microtask，没有就执行task，详细可阅读这篇文章

二、queue（队列）和stack（栈）

然后了解一下queue和stack

• queue(队列) 先进先出
• stack(栈) 函数执行 先进后出 1->2->3依次执行后，从3->2->1释放（销毁）

function one(){
  console.log(1);
  function two(){
    console.log(2);
    function three(){
      console.log(3);
    }
    three();
  } 
  two();
}
one();
复制代码

三、浏览器的事件环

1、所有的同步任务全在主线程上执行，形成一个执行栈

2、主线程之外存在一个执行队列

• 主线程上的所有异步方法（ajax、setTimeout、setImmedaite、MessageChannel），都会在有结果后（回调），放置（回调函数）在任务队列上

3、主线程（执行栈）任务全部完成后，系统读取任务队列放入执行栈上依次执行

4、主线程从任务队列中读取事件，这个过程是循环的

四、node事件环

如图（画了好久。。）

每一个框 都是一个队列

• 第一个是定时器（timers）队列（执行完毕或最大数量时【队列清空后】，到下一个阶段）
• 第二个i/o tcp 流 错误处理（错误回调放入，忽略）
• 第三个内部队列（忽略忽略）
• 第四个poll轮询队列（文件操作），一直在这个阶段等待，等定时器到达时间，执行对应的回调
• 第五个check队列，执行node的task，检查setImmediate
• 第六个关闭例如tcp的队列（继续忽略）
• promise.then、process.nectTick之类的microtask，会在当每一个阶段切换时，执行
• 第一次执行，微任务会先执行一次，典型如proxess.nextTick()

1、

setTimeout(()=>{
  console.log('timeout');
},0);
Promise.resolve().then(data=>{
  console.log('promise1');
});
setImmediate(()=>{
  console.log('immediate')
});
Promise.resolve().then(data=>{
  console.log('promise2');
});
process.nextTick((()=>{
  console.log('nectTick');
}));
复制代码

nectTick -> promise1 -> promise2 -> timeout -> immediate

• microtask先执行一次，nextTick最先执行，输出nextTick
• 再执行promise，输出promise1、promise2
• 执行timers队列，输出timeout
• 执行check队列，输出immediate

2、

setTimeout(()=>{
  console.log('timeout1');
},0);
setTimeout(()=>{
  Promise.resolve().then(data=>{
    console.log('promise');
  });
  console.log('timeout2');
},0);
process.nextTick((()=>{
  console.log('nectTick');
}));
复制代码

nectTick -> timeout1 -> timeout2 -> promise

因为在setTimeout执行完后到下一个阶段时，执行微任务

五、浏览器事件环和node事件环的区别

console.log('script start');
Promise.resolve().then(data=>{
  console.log('promise1');
  setTimeout(()=>{
    console.log('timeout1');
  },0);
});
setTimeout(()=>{
  console.log('timeout2');
  Promise.resolve().then(data=>{
    console.log('promise2');
  });
},0);
console.log('script end');
复制代码

在浏览器中

• 先执行log，打印出script start
• 然后将promise1的then里面的回调函数存放于microtask queue中
• 再把timeout2的回调函数存放在task queue中
• 执行log，打印出script end

在队列执行完毕后

• 我们先执行microtask queue内的函数log，打印出promise1
• 然后将setTimeout2放入task queue
• microtask queue还有内容吗？没有了，我们就执行task queue
• 执行task queue的setTimeout2的回调，打印出timeout2
• setTimeout2的回调又声明了promise2，我们就把promise2的then存放于microtask queue中

有microtask就执行microtask

• 所以先执行microtask queue中的回调log，打印出promise2
• 最后的最后，执行task queue中的回调log，打印出tiemout1

在node中

• 先打印出script start，promise1回调放入microtask queue，timeout2回调放入task queue，打印出script end
• 然后和浏览器一样执行microtask queue内的函数log，打印出promise1
• 将setTimeout2放入task queue
• 执行task queue的setTimeout2的回调，打印出timeout2
• 将promise2的then存放于microtask queue中

在node中，此时timers执行完了吗？并没有

• 所以执行task queue的回调log，打印出timeout1
• 最后在队列切换（timers切换到下一队列）时，执行microtask queue的回调log，打印出promise2

但是多试几次，发现结果可能有两种

这是为什么呢？ 我们来调试（by vsCode）一下，在setTimeout和promise上打上共6个断点。 执行后如图所示

很明显 代码调试已证明timeout1先于promise2的then的回调函数执行

造成timeout1和promise2的原因是无法比较then的回调和timeout1的执行速度，所以这么写是没有意义的。 如以下代码

Promise.resolve().then(data => {
  console.log('p1');
  setTimeout(() => {
    console.timeEnd('t1');
  },0);
});
setTimeout(() => {
  console.log('t2');
  console.time('t1');
  console.time('p2');
  Promise.resolve().then(data => {
    console.timeEnd('p2');
  });
},0);
复制代码

结果只和执行速度有关，没有可比性

六、node的其他task

node中的task有setTimeout、setInterval、setImmediate、I/O等

下面是个经典面试题

const fs = require('fs');
fs.readFile('./1.txt','utf8',(err,data)=>{
    console.log('success');
    setTimeout(()=>{
       console.log('timeout'); 
    },0);
    setImmediate(()=>{
        console.log('immediate');
    });
})
复制代码

这段代码执行顺序为 success -> immediate -> timeout。

因为在node事件环内在fs所在的poll队列后，只能执行check队列（setImmediate），只有在下一个循环，才走timers队列。

七、总结

1、浏览器中，有microtask，优先执行microtask，没有就执行task。

2、node中，由于node事件环，microtask只在改变队列时执行。task按照node事件环执行