面試官：為什么 Promise 比setTimeout() 快？

作者：前端小智 2021-01-21 07:53:29

我們來做個實驗。哪個執(zhí)行得更快:立即解決的 Promise 還是立即setTimeout(也就是0毫秒的setTimeout)?

本文已經(jīng)過原作者 devinduct 授權(quán)翻譯。

1.實驗

我們來做個實驗。哪個執(zhí)行得更快:立即解決的 Promise 還是立即setTimeout(也就是0毫秒的setTimeout)?

Promise.resolve(1).then(function resolve() { 
  console.log('Resolved!'); 
}); 
 
setTimeout(function timeout() { 
  console.log('Timed out!'); 
}, 0); 
 
// 'Resolved!' 
// 'Timed out!'

promise.resolve(1)是一個靜態(tài)函數(shù)，它返回一個立即解析的promise。setTimeout(callback, 0)以0毫秒的延遲執(zhí)行回調(diào)函數(shù)。

我們可以看到先打印'Resolved!'，再打印Timeout completed!，立即解決的 promise 比立即setTimeout更快。

是因為Promise.resolve(true).then(...)在setTimeout(..., 0)之前被調(diào)用了，所以 Promise 過程會更快嗎?公平的問題。

所以，我們稍微更改一下實驗條件，然后先調(diào)用setTimeout(..., 0)：

setTimeout(function timeout() { 
  console.log('Timed out!'); 
}, 0); 
 
Promise.resolve(1).then(function resolve() { 
  console.log('Resolved!'); 
}); 
 
// 'Resolved!' 
// 'Timed out!'

setTimeout(..., 0)在Promise.resolve(true).then(...)之前被調(diào)用。但，還是先打印Resolved!在打印'Timed out!'。

這是為啥呢?

2.事件循環(huán)

與異步 JS 相關(guān)的問題可以通過研究事件循環(huán)來回答。我們回顧一下異步 JS 工作方式的主要組成部分。

調(diào)用堆棧是一個LIFO(后進先出)結(jié)構(gòu)，它存儲在代碼執(zhí)行期間創(chuàng)建的執(zhí)行上下文。簡單地說，調(diào)用堆棧執(zhí)行這些函數(shù)。

Web api是異步操作(fetch 請求、promise、計時器)及其回調(diào)等待完成的地方。

**task queue (任務(wù)隊列)是一個FIFO(先進先出)**結(jié)構(gòu)，它保存準(zhǔn)備執(zhí)行的異步操作的回調(diào)。例如，超時的setTimeout()的回調(diào)函數(shù)或準(zhǔn)備執(zhí)行的單擊按鈕事件處理程序都在任務(wù)隊列中排隊。

**job queue (作業(yè)隊列)**是一個FIFO(先入先出)結(jié)構(gòu)，它保存準(zhǔn)備執(zhí)行的promise 的回調(diào)。例如，已完成的承諾的resolve或reject回調(diào)被排在作業(yè)隊列中。

最后，事件循環(huán)永久監(jiān)聽調(diào)用堆棧是否為空。如果調(diào)用堆棧為空，則事件循環(huán)查看作業(yè)隊列或任務(wù)隊列，并將準(zhǔn)備執(zhí)行的任何回調(diào)分派到調(diào)用堆棧中。

3.作業(yè)隊列與任務(wù)隊列

我們從事件循環(huán)的角度來看這個實驗，我將對代碼執(zhí)行進行一步一步的分析。

A)調(diào)用堆棧執(zhí)行setTimeout(..., 0)并計劃一個計時器， timeout()回調(diào)存儲在Web API中：

B)調(diào)用堆棧執(zhí)行 Promise.resolve(true).then(resolve)并安排一個 promise 解決方案。resolved()回調(diào)存儲在Web API中：

C)promise 立即被解析，同時計時器也立即執(zhí)行。這樣，定時器回調(diào)timeout()進入任務(wù)隊列，promise回調(diào)resolve()進入作業(yè)隊列

D)現(xiàn)在是有趣的部分：作業(yè)隊列(微任務(wù))優(yōu)先級高于任務(wù)隊列(宏任務(wù))。事件循環(huán)從作業(yè)隊列中取出promise回調(diào)resolve()并將其放入調(diào)用堆棧中。然后，調(diào)用堆棧執(zhí)行promise回調(diào)resolve()：