javascript中的异步 macrotask 和 microtask 简介

Posted 2020-10-10

javascript中的异步 macrotask 和 microtask 简介

什么是macrotask？什么是microtask?
在理解什么是macrotask？什么是microtask之前，我们先来看看javascript中的事件循环机制，先看如下面一段代码：

console.log(1);
setTimeout(function(){
  console.log(2);
}, 0);
console.log(3);

很明显 上面运行的结果是 1，3，2;
上面代码 setTimeout的延时为0，可以理解为setTimeout为异步函数调用，这是因为javascript是单线程的，主线程拥有一个执行栈以及一个任务队列
，主线程会依次执行代码，当遇到异步函数时候，会先将该函数入栈，所有主线程函数运行完毕后再将异步函数出栈，直到所有的异步函数执行完毕即可。

Macrotasks和Microtasks

Macrotasks和Microtasks 都属于上述的异步任务中的一种，他们分别有如下API：
macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering
microtasks: process.nextTick, Promise, MutationObserver

setTimeout的macrotask， 和 Promise的microtask 有哪些不同，先来看下代码如下：

console.log(1);
setTimeout(function(){
  console.log(2);
}, 0);
Promise.resolve().then(function(){
  console.log(3);
}).then(function(){
  console.log(4);
});

上面的代码输出的是 1, 3, 4, 2;

如上代码可以看到，Promise的函数代码的异步任务会优先于setTimeout的延时为0的任务先执行。
原因是任务队列分为 macrotasks 和 microtasks, 而promise中的then方法的函数会被推入到microtasks队列中，而setTimeout函数会被推入到macrotasks
任务队列中，在每一次事件循环中，macrotask只会提取一个执行，而microtask会一直提取，直到microsoft队列为空为止。
也就是说如果某个microtask任务被推入到执行中，那么当主线程任务执行完成后，会循环调用该队列任务中的下一个任务来执行，直到该任务队列到最后一个任务为止。而事件循环每次只会入栈一个macrotask,主线程执行完成该任务后又会检查microtasks队列并完成里面的所有任务后再执行macrotask的任务。

Microtask的应用：
为啥要用microtask? 根据 html Standrad， 在每个task运行完以后，UI都会重新渲染，那么在microtask中就完成数据更新，因此当前task
结束就可以得到最新的UI了。反之：如果新建一个task来做数据更新的话，那么渲染会执行两次。知乎如下回答（https://www.zhihu.com/question/55364497/answer/144215284）