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
setTimeoutpromise 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
那麼他們執行的規則是怎樣的呢？
原來，巨集任務與微任務，都各自有一個呼叫佇列（先進先出）。
遇到巨集任務，微任務，則將他們推入各自的呼叫佇列。需要注意的是，同步程式碼也是巨集任務。
巨集任務執行完一個，則去清空微任務佇列，微任務清空後再去執行下一個巨集任務。
我們來把上面的程式碼一行一行解讀一下：
首先定義兩個佇列,巨集任務佇列：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