//輸出內容
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');
/*
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
*/
這道題主要考察的是事件循環中函數執行順序的問題,其中包括async
,await
,setTimeout
,Promise
函數。下面來說一下本題中涉及到的知識點。
首先我們需要明白以下幾件事情:
- JS分爲同步任務和異步任務
- 同步任務都在主線程上執行,形成一個執行棧
- 主線程之外,事件觸發線程管理着一個任務隊列,只要異步任務有了運行結果,就在任務隊列之中放置一個事件。
- 一旦執行棧中的所有同步任務執行完畢(此時JS引擎空閒),系統就會讀取任務隊列,將可運行的異步任務添加到可執行棧中,開始執行。
任務隊列
根據規範,事件循環是通過任務隊列的機制來進行協調的。一個 Event Loop 中,可以有一個或者多個任務隊列(task queue),一個任務隊列便是一系列有序任務(task)的集合;每個任務都有一個任務源(task source),源自同一個任務源的 task 必須放到同一個任務隊列,從不同源來的則被添加到不同隊列。setTimeout/Promise 等API便是任務源,而進入任務隊列的是他們指定的具體執行任務。
宏任務
(macro)task(又稱之爲宏任務),可以理解是每次執行棧執行的代碼就是一個宏任務(包括每次從事件隊列中獲取一個事件回調並放到執行棧中執行)。
瀏覽器爲了能夠使得JS內部(macro)task與DOM任務能夠有序的執行,會在一個(macro)task執行結束後,在下一個(macro)task 執行開始前,對頁面進行重新渲染,流程如下:
(macro)task->渲染->(macro)task->...
(macro)task主要包含:script(整體代碼)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 環境)
微任務
microtask(又稱爲微任務),可以理解是在當前 task 執行結束後立即執行的任務。也就是說,在當前task任務後,下一個task之前,在渲染之前。
所以它的響應速度相比setTimeout(setTimeout是task)會更快,因爲無需等渲染。也就是說,在某一個macrotask執行完後,就會將在它執行期間產生的所有microtask都執行完畢(在渲染前)。
microtask主要包含:Promise.then、MutaionObserver、process.nextTick(Node.js 環境)
運行機制
在事件循環中,每進行一次循環操作稱爲 tick,每一次 tick 的任務處理模型是比較複雜的,但關鍵步驟如下:
- 執行一個宏任務(棧中沒有就從事件隊列中獲取)
- 執行過程中如果遇到微任務,就將它添加到微任務的任務隊列中
- 宏任務執行完畢後,立即執行當前微任務隊列中的所有微任務(依次執行)
- 當前宏任務執行完畢,開始檢查渲染,然後GUI線程接管渲染
- 渲染完畢後,JS線程繼續接管,開始下一個宏任務(從事件隊列中獲取)
流程圖如下:
Promise和async中的立即執行
我們知道Promise中的異步體現在then
和catch
中,所以寫在Promise中的代碼是被當做同步任務立即執行的。而在async/await中,在出現await出現之前,其中的代碼也是立即執行的。那麼出現了await時候發生了什麼呢?
await做了什麼
從字面意思上看await就是等待,await 等待的是一個表達式,這個表達式的返回值可以是一個promise對象也可以是其他值。
很多人以爲await會一直等待之後的表達式執行完之後纔會繼續執行後面的代碼,實際上await是一個讓出線程的標誌。await後面的表達式會先執行一遍,將await後面的代碼加入到microtask中,然後就會跳出整個async函數來執行後面的代碼。
由於因爲async await 本身就是promise+generator的語法糖。所以await後面的代碼是microtask。所以對於本題中的
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
等價於
async function async1() {
console.log('async1 start');
Promise.resolve(async2()).then(() => {
console.log('async1 end');
})
}
回到本題
以上就本道題涉及到的所有相關知識點了,下面我們再回到這道題來一步一步看看怎麼回事兒。
-
首先,事件循環從宏任務(macrotask)隊列開始,這個時候,宏任務隊列中,只有一個script(整體代碼)任務;當遇到任務源(task source)時,則會先分發任務到對應的任務隊列中去。所以,上面例子的第一步執行如下圖所示:
-
然後我們看到首先定義了兩個async函數,接着往下看,然後遇到了
console
語句,直接輸出script start
。輸出之後,script 任務繼續往下執行,遇到setTimeout
,其作爲一個宏任務源,則會先將其任務分發到對應的隊列中: -
script 任務繼續往下執行,執行了async1()函數,前面講過async函數中在await之前的代碼是立即執行的,所以會立即輸出
async1 start
。遇到了await時,會將await後面的表達式執行一遍,所以就緊接着輸出
async2
,然後將await後面的代碼也就是console.log('async1 end')
加入到microtask中的Promise隊列中,接着跳出async1函數來執行後面的代碼。 -
script任務繼續往下執行,遇到Promise實例。由於Promise中的函數是立即執行的,而後續的
.then
則會被分發到 microtask 的Promise
隊列中去。所以會先輸出promise1
,然後執行resolve
,將promise2
分配到對應隊列。 -
script任務繼續往下執行,最後只有一句輸出了
script end
,至此,全局任務就執行完畢了。根據上述,每次執行完一個宏任務之後,會去檢查是否存在 Microtasks;如果有,則執行 Microtasks 直至清空 Microtask Queue。
因而在script任務執行完畢之後,開始查找清空微任務隊列。此時,微任務中,
Promise
隊列有的兩個任務async1 end
和promise2
,因此按先後順序輸出async1 end,promise2
。當所有的 Microtasks 執行完畢之後,表示第一輪的循環就結束了。 -
第二輪循環開始,這個時候就會跳回async1函數中執行後面的代碼,然後遇到了同步任務console
語句,直接輸出async1 end
。這樣第二輪的循環就結束了。(也可以理解爲被加入到script任務隊列中,所以會先與setTimeout隊列執行) -
第二輪循環依舊從宏任務隊列開始。此時宏任務中只有一個
setTimeout
,取出直接輸出即可,至此整個流程結束。
在第一個變式中我將async2中的函數也變成了Promise函數,代碼如下:
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
//async2做出如下更改:
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
console.log('promise3');
resolve();
}).then(function() {
console.log('promise4');
});
console.log('script end');
可以先自己看看輸出順序會是什麼,下面來公佈結果:
script start
async1 start
promise1
promise3
script end
promise2
async1 end
promise4
setTimeout
在第一次macrotask執行完之後,也就是輸出script end
之後,會去清理所有microtask。所以會相繼輸出promise2
, async1 end
,promise4
,其餘不再多說。
async function async1() {
console.log('async1 start');
await async2();
//更改如下:
setTimeout(function() {
console.log('setTimeout1')
},0)
}
async function async2() {
//更改如下:
setTimeout(function() {
console.log('setTimeout2')
},0)
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout3');
}, 0)
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');
在第二個變式中,我將async1中await後面的代碼和async2的代碼都改爲異步的,代碼如下:
async function async1() {
console.log('async1 start');
await async2();
//更改如下:
setTimeout(function() {
console.log('setTimeout1')
},0)
}
async function async2() {
//更改如下:
setTimeout(function() {
console.log('setTimeout2')
},0)
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout3');
}, 0)
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');
可以先自己看看輸出順序會是什麼,下面來公佈結果:
script start
async1 start
promise1
script end
promise2
setTimeout3
setTimeout2
setTimeout1
在輸出爲promise2
之後,接下來會按照加入setTimeout隊列的順序來依次輸出,通過代碼我們可以看到加入順序爲3 2 1
,所以會按3,2,1的順序來輸出。
變式三
變式三是我在一篇面經中看到的原題,整體來說大同小異,代碼如下:
async function a1 () {
console.log('a1 start')
await a2()
console.log('a1 end')
}
async function a2 () {
console.log('a2')
}
console.log('script start')
setTimeout(() => {
console.log('setTimeout')
}, 0)
Promise.resolve().then(() => {
console.log('promise1')
})
a1()
let promise2 = new Promise((resolve) => {
resolve('promise2.then')
console.log('promise2')
})
promise2.then((res) => {
console.log(res)
Promise.resolve().then(() => {
console.log('promise3')
})
})
console.log('script end')
無非是在微任務那塊兒做點文章,前面的內容如果你都看懂了的話這道題一定沒問題的,結果如下:
script start
a1 start
a2
promise2
script end
promise1
a1 end
promise2.then
promise3
setTimeout