面試官：為什么 Promise 比setTimeout() 快？
本文已經(jīng)過原作者 devinduct 授權(quán)翻譯。
1.實(shí)驗(yàn)
我們來做個(gè)實(shí)驗(yàn)。哪個(gè)執(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)是一個(gè)靜態(tài)函數(shù)，它返回一個(gè)立即解析的promise。setTimeout(callback, 0)以0毫秒的延遲執(zhí)行回調(diào)函數(shù)。
我們可以看到先打印'Resolved!'，再打印Timeout completed!，立即解決的 promise 比立即setTimeout更快。
是因?yàn)镻romise.resolve(true).then(...)在setTimeout(..., 0)之前被調(diào)用了，所以 Promise 過程會(huì)更快嗎?公平的問題。
所以，我們稍微更改一下實(shí)驗(yàn)條件，然后先調(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)用堆棧是一個(gè)LIFO(后進(jìn)先出)結(jié)構(gòu)，它存儲(chǔ)在代碼執(zhí)行期間創(chuàng)建的執(zhí)行上下文。簡(jiǎn)單地說，調(diào)用堆棧執(zhí)行這些函數(shù)。
Web api是異步操作(fetch 請(qǐng)求、promise、計(jì)時(shí)器)及其回調(diào)等待完成的地方。
**task queue (任務(wù)隊(duì)列)是一個(gè)FIFO(先進(jìn)先出)**結(jié)構(gòu)，它保存準(zhǔn)備執(zhí)行的異步操作的回調(diào)。例如，超時(shí)的setTimeout()的回調(diào)函數(shù)或準(zhǔn)備執(zhí)行的單擊按鈕事件處理程序都在任務(wù)隊(duì)列中排隊(duì)。
**job queue (作業(yè)隊(duì)列)**是一個(gè)FIFO(先入先出)結(jié)構(gòu)，它保存準(zhǔn)備執(zhí)行的promise 的回調(diào)。例如，已完成的承諾的resolve或reject回調(diào)被排在作業(yè)隊(duì)列中。
最后，事件循環(huán)永久監(jiān)聽調(diào)用堆棧是否為空。如果調(diào)用堆棧為空，則事件循環(huán)查看作業(yè)隊(duì)列或任務(wù)隊(duì)列，并將準(zhǔn)備執(zhí)行的任何回調(diào)分派到調(diào)用堆棧中。
3.作業(yè)隊(duì)列與任務(wù)隊(duì)列
我們從事件循環(huán)的角度來看這個(gè)實(shí)驗(yàn)，我將對(duì)代碼執(zhí)行進(jìn)行一步一步的分析。
A)調(diào)用堆棧執(zhí)行setTimeout(..., 0)并計(jì)劃一個(gè)計(jì)時(shí)器， timeout()回調(diào)存儲(chǔ)在Web API中：
B)調(diào)用堆棧執(zhí)行 Promise.resolve(true).then(resolve)并安排一個(gè) promise 解決方案。resolved()回調(diào)存儲(chǔ)在Web API中：
C)promise 立即被解析，同時(shí)計(jì)時(shí)器也立即執(zhí)行。這樣，定時(shí)器回調(diào)timeout()進(jìn)入任務(wù)隊(duì)列，promise回調(diào)resolve()進(jìn)入作業(yè)隊(duì)列
D)現(xiàn)在是有趣的部分：作業(yè)隊(duì)列(微任務(wù))優(yōu)先級(jí)高于任務(wù)隊(duì)列(宏任務(wù))。事件循環(huán)從作業(yè)隊(duì)列中取出promise回調(diào)resolve()并將其放入調(diào)用堆棧中。然后，調(diào)用堆棧執(zhí)行promise回調(diào)resolve()：
E)最后，事件循環(huán)將計(jì)時(shí)器回調(diào)timeout()從任務(wù)隊(duì)列中出隊(duì)到調(diào)用堆棧中。然后，調(diào)用堆棧執(zhí)行計(jì)時(shí)器回調(diào)timeout()：
調(diào)用堆棧為空，已完成腳本的執(zhí)行。
總結(jié)
為什么立即解決的 promise 比立即執(zhí)行定時(shí)器處理得更快?
由于事件循環(huán)優(yōu)先級(jí)的存在，因此與任務(wù)隊(duì)列(存儲(chǔ)超時(shí)的setTimeout()回調(diào))相比，作業(yè)隊(duì)列(用于存儲(chǔ)已實(shí)現(xiàn)的Promise回調(diào))的優(yōu)先級(jí)更高。
完~ 我是小智，我要去刷碗了，我們下期見!
作者：Milos Protic 譯者：前端小智 來源：devinduct原文：https://dmitripavlutin.com/javascript-promises-settimeout/
本文轉(zhuǎn)載自微信公眾號(hào)「 大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系 大遷世界公眾號(hào)。
