microTask/macroTask执行顺序

2020-05-26

原题

//写出下面的输出顺序
var startTime = Date.now();

async function async1() {
  console.log("async1 start"); //1，主线程
  await async2();
  console.log("async1 end"); //2，micro task
}

async function async2() {
  console.log("async2"); //3，主线程
}

console.log("script start"); //4，主线程

setTimeout(function () {
  console.log("setTimeout"); //5，macro task
}, 0);

requestAnimationFrame(function () {
  console.log("requestAnimationFrame", Date.now() - startTime); //6，macro task
});

async1();

new Promise(function (resolve) {
  console.log("promise1"); //7，主线程
  resolve();
}).then(function () {
  console.log("promise2"); //8，micro task
});

console.log("script end"); //9，主线程

Chrome

先说chrome的输出顺序：4 -> 1 -> 3 -> 7 -> 9 -> 8 -> 2 -> 6/5。
解释：

event loop的执行机制：主线程 -> 清空微任务队列 -> 宏任务 -> 循环2、3…
async返回一个Promise，如果return非Promise的内容c，则会自动包装成Promise.resolve(c)
await后面挂起的内容可以理解成一个微任务（个人理解，不一定正确）
setTimeout 0和requestAnimationFrame的执行顺序不一定，和浏览器的执行速度、帧率有关。因为requestAnimationFrame总是尽可能快地在合适的时间执行

Firefox

输出顺序：4 -> 1 -> 3 -> 7 -> 9 -> (2 -> 8) -> 6/5

注意和chrome不一样的地方，先输出了Promise.then的内容，再输出await后面的内容。感觉ff的处理比chrome更符合直觉，因为await是比Promise.then更早加入微任务队列的。

笔记

这篇文章里面对macro task和micro task的分类挺好：微任务、宏任务与Event-Loop

宏任务：

#	浏览器	Node
I/O	✅	✅
setTimeout	✅	✅
setInterval	✅	✅
setImmediate	❌	✅
requestAnimationFrame	✅	❌

微任务：

#	浏览器	Node
process.nextTick	❌	✅
MutationObserver	✅	❌
Promise.then catch finally	✅	✅