當我們執行 JS 代碼的時候其實就是往執行堆疊中放入函式，那么遇到異步代碼的時候該怎么辦？其實當遇到異步的代碼時，會被掛起并在需要執行的時候加入到 Task（有多種 Task） 佇列中，一旦執行堆疊為空，Event Loop 就會從 Task 佇列中拿出需要執行的代碼并放入執行堆疊中執行，所以本質上來說 JS 中的異步還是同步行為，
不同的任務源會被分配到不同的 Task 佇列中，任務源可以分為 微任務（microtask） 和 宏任務（macrotask），在 ES6 規范中，microtask 稱為 jobs ，macrotask 稱為 task ，下面來看以下代碼的執行順序：
console.log('script start')
async function async1() {
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2 end')
}
async1()
setTimeout(function() {
console.log('setTimeout')
}, 0)
new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')
})
console.log('script end')
// script start => async2 end => Promise => script end => promise1 => promise2 => async1 end => setTimeout
注意：新的瀏覽器中不是如上列印的，因為 await 變快了，具體內容可以往下看
首先先來解釋下上述代碼的 async 和 await 的執行順序，當我們呼叫 async1 函式時，會馬上輸出 async2 end，并且函式回傳一個 Promise，接下來在遇到 await 的時候會就讓出執行緒開始執行 async1 外的代碼，所以我們完全可以把 await 看成是讓出執行緒的標志，
然后當同步代碼全部執行完畢以后，就會去執行所有的異步代碼，那么又會回到 await 的位置執行回傳的 Promise 的 resolve 函式，這又會把 resolve 丟到微任務佇列中，接下來去執行 then 中的回呼，當兩個 then 中的回呼全部執行完畢以后，又會回到 await 的位置處理回傳值，這時候你可以看成是 Promise.resolve (回傳值).then() ，然后 await 后的代碼全部被包裹進了 then 的回呼中，所以 console.log(' async1 end ') 會優先執行于 setTimeout，
如果你覺得上面這段解釋還是有點繞，那么我把 async 的這兩個函式改造成你一定能理解的代碼
new Promise((resolve, reject) => { console.log('async2 end') // Promise.resolve() 將代碼插入微任務佇列尾部 // resolve 再次插入微任務佇列尾部 resolve(Promise.resolve()) }).then(() => { console.log('async1 end') })
也就是說，如果 await 后面跟著 Promise 的話，async1 end 需要等待三個 tick 才能執行到，那么其實這個性能相對來說還是略慢的，所以 V8 團隊借鑒了 Node 8 中的一個 Bug，在引擎底層將三次 tick 減少到了二次 tick，但是這種做法其實是違法了規范的，當然規范也是可以更改的，這是 V8 團隊的一個 PR，目前已被同意這種做法，
所以 Event Loop 執行順序如下所示：
- 首先執行同步代碼，這屬于宏任務
- 當執行完所有同步代碼后，執行堆疊為空，查詢是否有異步代碼需要執行
- 執行所有微任務
- 當執行完所有微任務后，如有必要會渲染頁面
- 然后開始下一輪 Event Loop，執行宏任務中的異步代碼，也就是 setTimeout 中的回呼函式
所以以上代碼雖然 setTimeout 寫在 Promise 之前，但是因為 Promise 屬于微任務而 setTimeout 屬于宏任務，所以會有以上的列印，
微任務包括 process.nextTick ，promise ，MutationObserver ，
宏任務包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering ，
這里很多人會有個誤區，認為微任務快于宏任務，其實是錯誤的，因為宏任務中包括了 script ，瀏覽器會先執行一個宏任務，接下來有異步代碼的話才會先執行微任務，
轉載自：yck的https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5be04a8e6fb9a04a072fd2c
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/165624.html
標籤：JavaScript