我們知道 js 是單執行緒執行的，那麼非同步的程式碼 js 是怎麼處理的呢？例如下面的程式碼是如何進行輸出的：
console.log(1);
setTimeout(function() {
console.log(2);
}, 0);
new Promise(function(resolve) {
console.log(3);
resolve(Date.now());
}).then(function() {
console.log(4);
});
console.log(5);
setTimeout(function() {
new Promise(function(resolve) {
console.log(6);
resolve(Date.now());
}).then(function() {
console.log(7);
});
}, 0);在不執行的情況可以先猜測下最終的輸出，然後展開我們要說的內容。
1. 巨集任務與微任務
依據我們多年編寫 ajax 的經驗：js 應該是按照語句先後順序執行，在出現非同步時，則發起非同步請求後，接著往下執行，待非同步結果返回後再接著執行。但他內部是怎樣管理這些執行任務的呢？
在 js 中，任務分為巨集任務(macrotask)和微任務(microtask)，這兩個任務分別維護一個佇列，均採用先進先出的策略進行執行！同步執行的任務都在巨集任務上執行。
巨集任務主要有：script(整體程式碼)、setTimeout、setInterval、I/O、UI 互動事件、postMessage、MessageChannel、setImmediate(Node.js 環境)。
微任務主要有：Promise.then、 MutationObserver、 process.nextTick(Node.js 環境)。
具體的操作步驟如下：
- 從巨集任務的頭部取出一個任務執行；
- 執行過程中若遇到微任務則將其新增到微任務的佇列中；
- 巨集任務執行完畢後，微任務的佇列中是否存在任務，若存在，則挨個兒出去執行，直到執行完畢；
- GUI 渲染；
- 回到步驟 1，直到巨集任務執行完畢；
這 4 步構成了一個事件的迴圈檢測機制，即我們所稱的eventloop。
回到我們上面說的程式碼：
console.log(1);
setTimeout(function() {
console.log(2);
}, 0);
new Promise(function(resolve) {
console.log(3);
resolve(Date.now());
}).then(function() {
console.log(4);
});
console.log(5);
setTimeout(function() {
new Promise(function(resolve) {
console.log(6);
resolve(Date.now());
}).then(function() {
console.log(7);
});
}, 0);執行步驟如下：
- 執行 log(1)，輸出 1；
- 遇到 setTimeout，將回撥的程式碼 log(2)新增到巨集任務中等待執行；
- 執行 console.log(3)，將 then 中的 log(4)新增到微任務中；
- 執行 log(5)，輸出 5；
- 遇到 setTimeout，將回撥的程式碼 log(6, 7)新增到巨集任務中；
- 巨集任務的一個任務執行完畢，檢視微任務佇列中是否存在任務，存在一個微任務 log(4)（在步驟 3 中新增的），執行輸出 4；
- 取出下一個巨集任務 log(2)執行，輸出 2；
- 巨集任務的一個任務執行完畢，檢視微任務佇列中是否存在任務，不存在；
- 取出下一個巨集任務執行，執行 log(6)，將 then 中的 log(7)新增到微任務中；
- 巨集任務執行完畢，存在一個微任務 log(7)（在步驟 9 中新增的），執行輸出 7；
因此，最終的輸出順序為：1, 3, 5, 4, 2, 6, 7;
我們在Promise.then實現一個稍微耗時的操作，這個步驟看起來會更加地明顯：
console.log(1);
var start = Date.now();
setTimeout(function() {
console.log(2);
}, 0);
setTimeout(function() {
console.log(4, Date.now() - start);
}, 400);
Promise.resolve().then(function() {
var sum = function(a, b) {
return Number(a) + Number(b);
}
var res = [];
for(var i=0; i<5000000; i++) {
var a = Math.floor(Math.random()*100);
var b = Math.floor(Math.random()*200);
res.push(sum(a, b));
}
res = res.sort();
console.log(3);
})Promise.then中，先生成一個500萬隨機數的陣列，然後對這個陣列進行排序。執行這段程式碼可以發現：馬上會輸出1，稍等一會兒才會輸出3，然後再輸出2。不論等待多長時間輸出3，2一定會在3的後面輸出。這也就印證了eventloop中的第3步操作，必須等所有的微任務執行完畢後，才開始下一個巨集任務。
同時，這段程式碼的輸出很有意思：
setTimeout(function() {
console.log(4, Date.now() - start); // 4, 1380 電腦狀態的不同，輸出的時間差也不一樣
}, 400);本來要設定的是400ms後輸出，但因為之前的任務耗時嚴重，導致之後的任務只能延遲往後排。也能說明，setTimeout和setInterval這種操作的延時是不準確的，這兩個方法只能大概將任務400ms之後的巨集任務中，但具體的執行時間，還是要看執行緒是否空閒。若前一個任務中有耗時的操作，或者有無限的微任務加入進來時，則會阻塞下一個任務的執行。
2. async-await
從上面的程式碼中也能看到 Promise.then 中的程式碼是屬於微服務，那麼 async-await 的程式碼怎麼執行呢？比如下面的程式碼：
function A() {
return Promise.resolve(Date.now());
}
async function B() {
console.log(Math.random());
let now = await A();
console.log(now);
}
console.log(1);
B();
console.log(2);其實，async-await 只是 Promise+generator 的一種語法糖而已。上面的程式碼我們改寫為這樣，可以更加清晰一點：
function B() {
console.log(Math.random());
A().then(function(now) {
console.log(now);
})
}
console.log(1);
B();
console.log(2);這樣我們就能明白輸出的先後順序了： 1, 0.4793526730678652(隨機數), 2, 1557830834679(時間戳);
3. requestAnimationFrame
requestAnimationFrame也屬於執行是非同步執行的方法，但我任務該方法既不屬於巨集任務，也不屬於微任務。按照MDN中的定義：
window.requestAnimationFrame()告訴瀏覽器——你希望執行一個動畫，並且要求瀏覽器在下次重繪之前呼叫指定的回撥函式更新動畫。該方法需要傳入一個回撥函式作為引數，該回撥函式會在瀏覽器下一次重繪之前執行
requestAnimationFrame是GUI渲染之前執行，但在微服務之後，不過requestAnimationFrame不一定會在當前幀必須執行，由瀏覽器根據當前的策略自行決定在哪一幀執行。
4. 總結
我們要記住最重要的兩點：js是單執行緒和eventloop的迴圈機制。
更多文章，歡迎檢視：https://www.xiabingbao.com/post/javascript/js-eventloop.html
我的前端公眾號：
