js中的宏任务与微任务

如果你已经知道了js中存在宏任务和微任务，那么你一定已经了解过promise了。因为在js中promise是微任务的一个入口。

先来看一道题：

setTimeout(function(){
    console.log('setTimeout')
});
new Promise(function(resolve, reject){
    console.log('pormise body');
    resolve();
}).then(function(){
    console.log('promise then')
});
console.log('main');

这题的答案是:

promise body
main
promise then
setTimeout

promise body出现在第一行一点也不意外，意外的是，setTimeout出现在了promise then的后边。

 

setTimeout和promise then都是异步调用，setTimeout又定义在promise之前，如果没有意外，应该是先输出setTimeout才对，但这里却恰恰相反。

 

这里涉及到的知识点，就是宏任务与微任务了。标记一下上边的代码：

setTimeout(function(){ // 同步代码，语句1
    console.log('setTimeout') // 宏任务，语句2
});
new Promise(function(resolve, reject){
    console.log('pormise body'); // 同步代码，语句3
    resolve(); // 同步代码，语句4
}).then(function(){
    console.log('promise then') // 微任务，语句5
});
console.log('main'); // 同步代码，语句6

那么他们运行的规则是怎样的呢？

 

原来，宏任务与微任务，都各自有一个调用队列（先进先出）。

 

遇到宏任务，微任务，则将他们推入各自的调用队列。需要注意的是，同步代码也是宏任务。

 

宏任务执行完一个，则去清空微任务队列，微任务清空后再去执行下一个宏任务。

 

这个过程颇像去医院诊室排队看大夫的情景：

如果有一个病人A叫到号以后，又被大夫安排先去做检查，那么做完检查以后病人A回到诊室门口，可以直接等待当前正在看病的病人B与大夫交谈结束后，将检查结果交给大夫，而不用再次排队。

 

我们来把上面的代码一行一行解读一下：

 

首先定义两个队列,宏任务队列：MacroQqueue， 微任务队列： MicroQueue

 

第一步，先按同步代码顺序运行

同步代码，语句1： 添加一个宏任务，将语句2推入MacroQueue。 // MacroQueue: [{task: 语句2}]

同步代码，语句3： 打印promise body

同步代码，语句4： 添加一个微任务，将语句5推入MicroQueue。 // MicroQueue: [{task: 语句5}]

同步代码，语句6： 打印main。 // 同步代码（宏任务）完成

 

第二步，开始清空微任务队列

微任务： 语句5,从MicroQueue跳出，打印promise then。 // 微任务队列全部清空

 

第三步，开始清空宏任务队列

宏任务：语句2，从MacroQqueue跳出，打印setTimeout // 宏任务队列全部清空

 

第四步：开始清空微任务队列

队列为空...

 

一轮循环完成。开始下一轮，如此循环下去。

 

通过上面的讲解，大家应该能对宏任务，微任务的运行机制有了一定的了解了吧。那么都有哪些常见的宏任务与微任务呢？

请看下表：

 

宏任务	浏览器	nodejs
同步代码	✅	✅
I/O	✅	✅
setTimeout	✅	✅
setInterval	✅	✅
setImmediate	❌	✅
requestAnimationFrame	✅	❌

 

微任务	浏览器	nodejs
process.nextTick	❌	✅
MutationObserver	✅	❌
Promise （async/await）	✅	✅

好了，我们来一道复杂一点的题练练手：

console.log('sync statement 1');
Promise.resolve().then(function() {
    console.log('micro task 1');
    setTimeout(function() {
        console.log('macro task 1');
    }, 0);
}).then(function() {
    console.log('micro task 2');
});
setTimeout(function() {
    console.log('macro task 2')
    Promise.resolve().then(function(){
        console.log('micro task 3');
    })
}, 0)
console.log('sync statement 2');
//输出：
// sync statement 1
// sync statement 2
// micro task 1
// micro task 2
// macro task 2
// micro task 3
// macro task 1

标注一下方便大家分析：

console.log('sync statement 1'); // 同步代码，语句1
Promise.resolve().then(function() { // 同步代码，语句2，注册了一个微任务
    console.log('micro task 1'); // 微任务，语句3
    setTimeout(function() { // 微任务，语句4，同时注册了一个宏任务
        console.log('macro task 1'); // 宏任务，语句5
    }, 0);
}).then(function() {
    console.log('micro task 2'); // 微任务，语句6
});
setTimeout(function() { // 同步代码，语句7
    console.log('macro task 2') // 宏任务，语句8
    Promise.resolve().then(function(){ // 宏任务，语句9，同时注册了一个微任务
        console.log('micro task 3'); // 微任务，语句10
    })
}, 0)
console.log('sync statement 2'); // 同步代码，语句11