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

之前讲了个手写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事件环执行