一垮耳、背景
緣起自一篇文章：8 張圖幫你一步步看清 async/await 和 promise 的執(zhí)行順序仿粹，文中所拋出的話題朵你，本質(zhì)上就是考察是否完全掌握了 JavaScript 的事件循環(huán)機(jī)制（Event Loop）罷了班缎。
插個(gè)話家坎，不同宿主環(huán)境（比如瀏覽器、Node）吝梅，JS 的事件循環(huán)會(huì)稍有不同虱疏，本文則是基于瀏覽器環(huán)境下。至于其中差異并非本文討論的內(nèi)容苏携，因此不展開講述做瞪。
前面文章末尾或評(píng)論區(qū)提到的，同樣一段代碼在不同瀏覽器右冻、或同一瀏覽器的不同版本装蓬，執(zhí)行順序存在差異。（代碼就不貼上來了纱扭，可以點(diǎn)開鏈接去查看）
本人親測(cè)結(jié)果牍帚，在 Chrome 92 和 Safari 14.1.2 執(zhí)行順序仍有差異（2021.08）。
這種差異會(huì)帶來什么影響呢乳蛾？
實(shí)際應(yīng)用場(chǎng)景幾乎沒有影響暗赶。所以不用擔(dān)心鄙币，如果有人在項(xiàng)目中寫出這樣的代碼，你可以去打死他了蹂随。請(qǐng)不要過分依賴異步操作的順序十嘿。
一般來說，若再遇到 JavaScript 運(yùn)行方面的差異岳锁，應(yīng)以最新 Chrome 瀏覽器的行為為準(zhǔn)绩衷。（跟 Chrome 瀏覽器的 V8 引擎更新策略有關(guān)）
二、找原因
本著尋根問底的初心激率，去找答案咳燕。其實(shí)去閱讀 ECMAScript 標(biāo)準(zhǔn)是最直接、最權(quán)威的（例如乒躺，關(guān)于 Await 的標(biāo)準(zhǔn)在這里）招盲。但由于功力不夠，沒辦法完全看懂聪蘸。
于是搜了好久，終于找到了一個(gè)相關(guān)的問題：async/await 在 Chrome 環(huán)境和 Node 環(huán)境的執(zhí)行結(jié)果不一致表制，求解健爬？以及賀老的回答。
該問題中的示例（略微修改）如下：
async function foo() {
console.log('a')
await bar()
console.log('b')
}
async function bar() {
console.log('c')
}
foo()
new Promise(resolve => {
console.log('d')
resolve()
}).then(() => {
console.log('e')
})
相信很多同學(xué)一下就寫出了“正確”的打印順序：a么介、c娜遵、d、b壤短、e设拟。
我們執(zhí)行代碼并打印出來看下：
對(duì)比發(fā)現(xiàn)，不同瀏覽器下運(yùn)行結(jié)果竟然不一樣久脯，Why?
- 最新版 Chrome 瀏覽器打印結(jié)果為：
a纳胧、c、d帘撰、b跑慕、e。 - 最新版 Safari 瀏覽器打印結(jié)果為：
a摧找、c核行、d、e蹬耘、b芝雪。 - 在 Node 14.16.0 環(huán)境下，運(yùn)行結(jié)果同 Chrome 瀏覽器综苔。
造成以上差異的根本原因是惩系，ECMAScript 就 Await 標(biāo)準(zhǔn)有所調(diào)整位岔，最新規(guī)定是 await 將直接使用 Promise.resolve() 相同的語義。正是因?yàn)榇舜握{(diào)整蛆挫，導(dǎo)致了不同 JS 引擎或者同一 JS 引擎的不同版本赃承，在解析同一腳本會(huì)出現(xiàn)結(jié)果的差異。
上面示例中 await bar() 的計(jì)算結(jié)果（指 bar() 返回值）就是一個(gè) Promise 對(duì)象悴侵。根據(jù) Promise.resolve() 的語法瞧剖，若參數(shù)是一個(gè) Promise 實(shí)例對(duì)象，將會(huì)不做任何修改可免、原封不動(dòng)地返回該實(shí)例抓于。
const p1 = new Promise(resolve => resolve(1))
const p2 = Promise.resolve(p1)
console.log(p1 === p2) // true
// ?? 注意，關(guān)于 Promise.resolve() 在 Chrome 與 Safari 表現(xiàn)是一致的浇借。
其實(shí)無需過分擔(dān)心這種差異捉撮，對(duì)平時(shí)寫項(xiàng)目有什么影響，如果在真正項(xiàng)目寫出類似的邏輯妇垢，確實(shí)該反思一下巾遭。但是......面試官可能會(huì)問哦，前面文章提到的那道題好像就是頭條的面試題闯估。
三灼舍、原因剖析
這種差異，是 JavaScript 引擎在實(shí)現(xiàn)時(shí)沒有嚴(yán)格遵循 ECMAScript 標(biāo)準(zhǔn)導(dǎo)致的涨薪。
往下之前骑素，明確兩點(diǎn)：
Promise對(duì)象的構(gòu)造方法內(nèi)屬于同步任務(wù)，而Promise.prototype.then()才屬于異步任務(wù)（微任務(wù)刚夺，它的執(zhí)行順序后于同步任務(wù)）
Promise.resolve()方法献丑，若參數(shù)為Promise對(duì)象，將會(huì)直接返回該對(duì)象侠姑，而不是返回一個(gè)全新的Promise對(duì)象创橄。只有當(dāng)
Promise對(duì)象的狀態(tài)發(fā)生變化，才會(huì)被放入微任務(wù)隊(duì)列莽红。
上面的示例中 a筐摘、c、d 的順序都沒有爭議船老，因此我們簡化一下示例：
// 其中 p1咖熟、p2 都是狀態(tài)為 fulfilled 的 Promise 對(duì)象
async function foo() {
await p1
console.log('b')
}
foo()
p2.then(() => {
console.log('e')
})
關(guān)鍵點(diǎn)在于 await p1 的語義是什么？一般而言柳畔，我們可以把：
async function foo() {
await p1
console.log('b')
}
理解為：
function foo() {
return RESOLVE(p1).then(() => {
console.log('b')
})
}
按目前的標(biāo)準(zhǔn)定義 RESOLVE(p1) 等同于 Promise.resolve(p1)馍管，因此 RESOLVE(p1) 結(jié)果就是 p1。根據(jù)代碼邏輯可知 p1 比 p2 更早地放入微任務(wù)隊(duì)列薪韩。本著先進(jìn)先出的原則确沸，會(huì)先執(zhí)行微任務(wù) p1捌锭，后執(zhí)行微任務(wù) p2，因此先后打印出 b罗捎、e观谦。
但是舊版的 JS 引擎在實(shí)現(xiàn) RESOLVE(p1) 的問題上，與當(dāng)前標(biāo)準(zhǔn)有微妙而重要的區(qū)別桨菜。區(qū)別在于豁状，即使 p1 是一個(gè) Promise 對(duì)象，RESOLVE(p1) 仍會(huì)返回一個(gè)全新的 Promise 對(duì)象（假設(shè)為 p3）倒得。
換句話說泻红，就是執(zhí)行 p1.then() 時(shí)，又產(chǎn)生了一個(gè)微任務(wù) p3霞掺，并放入微任務(wù)隊(duì)列谊路。還是本著先進(jìn)先出的原則，接著執(zhí)行微任務(wù) p2 并打印 e菩彬。等 p2 執(zhí)行完畢缠劝，接著執(zhí)行微任務(wù) p3，然后打印出 b骗灶。因此先后順序是 e惨恭、b。
function foo() {
return RESOLVE(p1).then(() => {
console.log('b')
})
}
// 相當(dāng)于
function foo() {
return new Promise(resolve => resolve(p1)) // 相當(dāng)于微任務(wù) p1
.then(() => { // 相當(dāng)于微任務(wù) p3
console.log('b')
})
}
雖然我認(rèn)為自己懂 Async 內(nèi)部執(zhí)行器的執(zhí)行過程，但是我自認(rèn)為對(duì)本案例解釋得不夠好。就是那種“懂但不知道怎么表達(dá)出來”的感覺麻掸。如果看懵了的話石抡，建議直接看賀老的回答。
四糊肤、結(jié)論
綜上琴昆，不同瀏覽器下執(zhí)行順序不一樣，應(yīng)該就是 JS 引擎（其中 Chrome馆揉、Node 是 V8 引擎业舍，而 Safari 是 JavaScriptCore 引擎。）底層實(shí)現(xiàn) await 語法的方式略有不同升酣。若嚴(yán)格遵循 ECMAScript 標(biāo)準(zhǔn)的話舷暮， 執(zhí)行結(jié)果與最新的 Chrome 瀏覽器應(yīng)該是一致的。
前面提到若有差異噩茄，一般以最新版本的 Chrome 為準(zhǔn)下面，原因是：Chrome 瀏覽器每次升級(jí)都會(huì)同時(shí)更新到 V8 的最新版。而 Node 更新小版本時(shí)绩聘，V8 也只更新小版本沥割，只有 Node 更新大版本時(shí)才會(huì)更新 V8 大版本耗啦。所以，絕大部分時(shí)候 Node 的 V8 會(huì)比同時(shí)期的 Chrome 的 V8 要落后机杜。
