javascript macrotask & microtask

先看一个实例

案例

console.log('script start');

setTimeout(function() {
    console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
    console.log('promise1');

    setTimeout(function() {
        console.log('setTimeout in microtask');
    }, 0);
}).then(function() {
    console.log('promise2');
});

console.log('script end');

输出

script start
script end
promise1
promise2
setTimeout
setTimeout in microtask

Macrotask 和 Microtask

Macrotask 和 Microtask 都是属于异步任务中的一种

Macrotasks ： setTimeout, setInterval, setImmediate, I/O, UI rendering
Microtask ： process.nextTick, Promises, Object.observe, MutationObserver

Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。

Object.observe (废弃)：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe

在每一次事件循环中，macrotask 只会提取一个执行，而 microtask 会一直提取，直到 microtasks 队列清空。而事件循环每次只会入栈一个 macrotask ，主线程执行完该任务后又会先检查 microtasks 队列并完成里面的所有任务后再执行 macrotask

用处

可以看出 Macrotask 的优先级低于 Microtask ，那么 UI rendering 之前我们可以做很多数据上的处理，比如 Vue 使用 MutationObserver 可以处理完所有数据处理后再统一做 UI render

参考：

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/