從面試題看 JS 事件迴圈與 macro micro 任務佇列(轉載)

Leon Aries發表於2019-03-14

背景

一天愜意的下午。朋友給我分享了一道頭條面試題,如下:

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')
複製程式碼複製程式碼

這個題目主要是考察對同步任務、非同步任務:setTimeout、promise、async/await的執行順序的理解程度。(建議大家也自己先做一下o)

當時由於我對async、await瞭解的不是很清楚,答案錯的千奇百怪 :(),就不記錄了,然後我就去看文章理了理思路。現在寫在下面以供日後參考。

js事件輪詢的一些概念

這裡首先需要明白幾個概念:同步任務、非同步任務、任務佇列、microtask、macrotask

同步任務
指的是,在主執行緒上排隊執行的任務,只有前一個任務執行完畢,才能執行後一個任務;

非同步任務
指的是,不進入主執行緒、而進入"任務佇列"(task queue)的任務,等待同步任務執行完畢之後,輪詢執行非同步任務佇列中的任務

macrotask佇列
等同於我們常說的任務佇列,macrotask是由宿主環境分發的非同步任務,事件輪詢的時候總是一個一個任務佇列去檢視執行的,"任務佇列"是一個先進先出的資料結構,排在前面的事件,優先被主執行緒讀取。

microtask
是由js引擎分發的任務,總是新增到當前任務佇列末尾執行。另外在處理microtask期間,如果有新新增的microtasks,也會被新增到佇列的末尾並執行。注意與setTimeout(fn,0)的區別:

setTimeOut(fn(),0)
指定某個任務在主執行緒最早可得的空閒時間執行,也就是說,儘可能早得執行。它在"任務佇列"的尾部新增一個事件,因此要等到同步任務和"任務佇列"現有的事件都處理完,才會得到執行。

總結一下:

task queue、microtask、macrotask

  • An event loop has one or more task queues.(task queue is macrotask queue)
  • Each event loop has a microtask queue.
  • task queue = macrotask queue != microtask queue
  • a task may be pushed into macrotask queue,or microtask queue
  • when a task is pushed into a queue(micro/macro),we mean preparing work is finished,so the task can be executed now.

所以我們可以得到js執行順序是:

開始 -> 取第一個task queue裡的任務執行(可以認為同步任務佇列是第一個task queue) -> 取microtask全部任務依次執行 -> 取下一個task queue裡的任務執行 -> 再次取出microtask全部任務執行 -> … 這樣迴圈往復

常見的一些巨集任務和微任務:

macrotask:

  • setTimeout
  • setInterval
  • setImmediate
  • requestAnimationFrame
  • I/O
  • UI rendering

microtask:

  • process.nextTick
  • Promises
  • Object.observe
  • MutationObserver

Promise、Async、Await都是一種非同步解決方案

Promise
是一個建構函式,呼叫的時候會生成Promise例項。當Promise的狀態改變時會呼叫then函式中定義的回撥函式。我們都知道這個回撥函式不會立刻執行,他是一個微任務會被新增到當前任務佇列中的末尾,在下一輪任務開始執行之前執行。

async/await
成對出現,async標記的函式會返回一個Promise物件,可以使用then方法新增回撥函式。await後面的語句會同步執行。但 await 下面的語句會被當成微任務新增到當前任務佇列的末尾非同步執行。

我們來看一下答案

不記得題的!繼續往下看,溫馨的準備了題目,不用往上翻

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')
複製程式碼複製程式碼

node環境下: script start -> async1 start -> async2 -> promise1 -> script end -> promise2 -> async1 end -> setTimeout

Chrome環境下: script start -> async1 start -> async2 -> promise1 -> script end -> async1 end -> promise2 -> setTimeout

按照上面寫的js執行順序就可以得到正確結果,但最後卻又存在兩個答案,為什麼會出現兩種結果呢?我們可以看到兩種結果中就是async1 end 和 Promise2之間的順序出現差別,這主要是V8最新版本與稍老版本的差異,他們對await的執行方法不同,如下:

async function f(){
  await p
  console.log(1);
}
//新版V8應該會解析成下面這樣
function f(){
  Promise.resolve(p).then(()=>{
    console.log(1)
  })
}
//舊版的V8應該會解析成下面的這樣
function f(){
  new Promise(resolve=>{
    resolve(p)
  }).then(()=>{
    console.log(1)
  })
}
複製程式碼複製程式碼

正對上面的這兩種差異主要是:

  1. 當Promise.resolve 的引數為 promise 物件時直接返回這個 Promise 物件,then 函式在這個 Promise 物件發生改變後立刻執行。
  2. 舊版的解析 await 時會重新生成一個Promise物件。儘管該 promise 確定會 resolve 為 p,但這個過程本身是非同步的,也就是現在進入佇列的是新 promise 的 resolve 過程,所以該 promise 的 then 不會被立即呼叫,而要等到當前佇列執行到前述 resolve 過程才會被呼叫,然後再執行then函式。(下面的例子會講解當resolve()引數為promise時會怎麼執行)

不用擔心這個題沒解,真相只有一個。根據 TC39 最近決議,await將直接使用 Promise.resolve() 相同語義。

最後我們以最新決議來分析這個題目的可能的執行過程:

  • 定義函式async1、async2。輸出'script start'
  • 將 setTimeout 裡面的回撥函式(巨集任務)新增到下一輪任務佇列。因為這段程式碼前面沒有執行任何的非同步操作且等待時間為0s。所以回撥函式會被立刻放到下一輪任務佇列的開頭。
  • 執行async1。我們知道async函式裡面await標記之前的語句和 await 後面的語句是同步執行的。所以這裡先後輸出"async1 start",’async2 start‘.
  • 這時暫停執行下面的語句,下面的語句被放到當前佇列的最後。
  • 繼續執行同步任務。
  • 輸出 ‘Promise1’。將then裡面的函式放在當前佇列的最後。
  • 然後輸出‘script end’,注意這時只是同步任務執行完了,當前任務佇列的任務還沒有執行完畢,還有兩個微任務被新增進來了!佇列是先進先出的結構,所以這裡先輸出 ‘async1 end’ 再輸出 ‘Promise2’,這時第一輪任務佇列才真算執行完了。
  • 然後執行下一個任務列表的任務。執行setTimeout裡面的非同步函式。輸出‘setTimeout’。

練習一下

stackoverflow上的一道題目

let resolvePromise = new Promise(resolve => {
  let resolvedPromise = Promise.resolve()
  resolve(resolvedPromise)
})
resolvePromise.then(() => {
  console.log('resolvePromise resolved')
})
let resolvedPromiseThen = Promise.resolve().then(res => {
  console.log('promise1')
})
resolvedPromiseThen
  .then(() => {
    console.log('promise2')
  })
  .then(() => {
    console.log('promise3')
  })
複製程式碼複製程式碼

結果:promise1 -> promise2 -> resolvePromise resolved -> promise3

這道題真的是非常費解了。為什麼'resolvePromise resolved'會在第三行才顯示呢?和舍友討論了一晚上無果。

其實這個題目的難點就在於resolve一個Promise物件,js引擎會怎麼處理。我們知道Promise.resolve()的引數為Promise物件時,會直接返回這個Promise物件。但當resolve()的引數為Promise物件時,情況會有所不同:

resolve(resolvedPromise)
//等同於:
Promise.resolve().then(() => resolvedPromise.then(resolve, reject));
複製程式碼複製程式碼

所以這裡第一次執行到這兒的時候:

  • () => resolvedPromise.then(resolve, reject)會被放入當前任務列表的最後
  • 然後是Promise1被放入任務列表。
  • 沒有同步操作了開始執行微任務列表,這時resolvedPromise是一個已經resolved的Promise直接執行then函式,將resole()函式放入當前佇列的最後,輸出Promise1。
  • 將Promise2放入佇列的最後。執行resole()
  • 這時的resolvePromise終於變成了一個resolved狀態的Promise物件了,將‘resolvePromise resolved’放入當前任務列表的最後。輸出Promise2。
  • 將Promise3放到當前任務佇列的最後。輸出resolvePromise resolved。輸出Promise3.

結束!這裡面的幾段程式碼是比較重要的,解釋了js會按照什麼樣的方式來執行這些新特性。

最後如果有誤,歡迎指正。


作者:sliiva
連結:https://juejin.im/post/5c8a024d51882546be0a3082
來源:掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。

相關文章