深入理解JavaScript事件迴圈機制

來源:互聯網
上載者:User

前言

眾所周知,JavaScript 是一門單線程語言,雖然在 html5 中提出了 Web-Worker ,但這並未改變 JavaScript 是單線程這一核心。可看HTML規範中的這段話:

To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. There are two kinds of event loops: those for browsing contexts, and those for workers.

為了協調事件、使用者互動、指令碼、UI 渲染和網路處理等行為,使用者引擎必須使用 event loops。Event Loop 包含兩類:一類是基於 Browsing Context ,一種是基於 Worker ,二者是獨立啟動並執行。 下面本文用一個例子,著重講解下基於 Browsing Context 的事件迴圈機制。

來看下面這段 JavaScript 代碼:

console.log('script start');setTimeout(function() {  console.log('setTimeout');}, 0);Promise.resolve().then(function() {  console.log('promise1');}).then(function() {  console.log('promise2');});console.log('script end');

先猜測一下這段代碼的輸出順序是什麼,再去瀏覽器控制台輸入一下,看看實際輸出的順序和你猜測出的順序是否一致,如果一致,那就說明,你對 JavaScript 的事件迴圈機制還是有一定瞭解的,繼續往下看可以鞏固下你的知識;而如果實際輸出的順序和你的猜測不一致,那麼本文下面的部分會為你答疑解惑。

任務隊列

所有的任務可以分為同步任務和非同步任務,同步任務,顧名思義,就是立即執行的任務,同步任務一般會直接進入到主線程中執行;而非同步任務,就是非同步執行的任務,比如ajax網路請求,setTimeout 定時函數等都屬於非同步任務,非同步任務會通過任務隊列( Event Queue )的機制來進行協調。具體的可以用下面的圖來大致說明一下:

同步和非同步任務分別進入不同的執行環境,同步的進入主線程,即主執行棧,非同步進入 Event Queue 。主線程內的任務執行完畢為空白,會去 Event Queue 讀取對應的任務,推入主線程執行。 上述過程的不斷重複就是我們說的 Event Loop (事件迴圈)。

在事件迴圈中,每進行一次迴圈操作稱為tick,通過閱讀規範可知,每一次 tick 的任務處理模型是比較複雜的,其關鍵的步驟可以總結如下:

  1. 在此次 tick 中選擇最先進入隊列的任務( oldest task ),如果有則執行(一次)
  2. 檢查是否存在 Microtasks ,如果存在則不停地執行,直至清空Microtask Queue
  3. 更新 render
  4. 主線程重複執行上述步驟

可以用一張圖來說明下流程:

這裡相信有人會想問,什麼是 microtasks ?規範中規定,task分為兩大類, 分別是 Macro Task (宏任務)和 Micro Task(微任務), 並且每個宏任務結束後, 都要清空所有的微任務,這裡的 Macro Task也是我們常說的 task ,有些文章並沒有對其做區分,後面文章中所提及的task皆看做宏任務( macro task)。

(macro)task 主要包含:script( 整體代碼)、setTimeout、setInterval、I/O、UI 互動事件、setImmediate(Node.js 環境)

microtask主要包含:Promise、MutaionObserver、process.nextTick(Node.js 環境)

setTimeout/Promise 等API便是任務源,而進入任務隊列的是由他們指定的具體執行任務。來自不同任務源的任務會進入到不同的任務隊列。其中 setTimeout 與 setInterval 是同源的。

分析範例程式碼

千言萬語,不如就著例子講來的清楚。下面我們可以按照規範,一步步執行解析下上面的例子,先貼一下例子代碼(免得你往上翻)。

console.log('script start');setTimeout(function() {  console.log('setTimeout');}, 0);Promise.resolve().then(function() {  console.log('promise1');}).then(function() {  console.log('promise2');});console.log('script end');
  1. 整體 script 作為第一個宏任務進入主線程,遇到 console.log,輸出 script start
  2. 遇到 setTimeout,其回呼函數被分發到宏任務 Event Queue 中
  3. 遇到 Promise,其 then函數被分到到微任務 Event Queue 中,記為 then1,之後又遇到了 then 函數,將其分到微任務 Event Queue 中,記為 then2
  4. 遇到 console.log,輸出 script end

至此,Event Queue 中存在三個任務,如下表:

宏任務 微任務
setTimeout then1
- then2
  1. 執行微任務,首先執行then1,輸出 promise1, 然後執行 then2,輸出 promise2,這樣就清空了所有微任務
  2. 執行 setTimeout 任務,輸出 setTimeout 至此,輸出的順序是:script start, script end, promise1, promise2, setTimeout

so,你猜對了嗎?

看看你掌握了沒

再來一個題目,來做個練習:

console.log('script start');setTimeout(function() {  console.log('timeout1');}, 10);new Promise(resolve => {    console.log('promise1');    resolve();    setTimeout(() => console.log('timeout2'), 10);}).then(function() {    console.log('then1')})console.log('script end');

這個題目就稍微有點複雜了,我們再分析下:

首先,事件迴圈從宏任務 (macrotask) 隊列開始,最初始,宏任務隊列中,只有一個 scrip t(整體代碼)任務;當遇到任務源 (task source) 時,則會先分發任務到對應的任務隊列中去。所以,就和上面例子類似,首先遇到了console.log,輸出 script start; 接著往下走,遇到 setTimeout 任務源,將其分發到任務隊列中去,記為 timeout1; 接著遇到 promise,new promise 中的代碼立即執行,輸出 promise1, 然後執行 resolve ,遇到 setTimeout ,將其分發到任務隊列中去,記為 timemout2, 將其 then 分發到微任務隊列中去,記為 then1; 接著遇到 console.log 代碼,直接輸出 script end 接著檢查微任務隊列,發現有個 then1 微任務,執行,輸出then1 再檢查微任務隊列,發現已經清空,則開始檢查宏任務隊列,執行 timeout1,輸出 timeout1; 接著執行 timeout2,輸出 timeout2 至此,所有的都隊列都已清空,執行完畢。其輸出的順序依次是:script start, promise1, script end, then1, timeout1, timeout2

用流程圖看更清晰:

總結

有個小 tip:從規範來看,microtask 優先於 task 執行,所以如果有需要優先執行的邏輯,放入microtask 隊列會比 task 更早的被執行。

最後的最後,記住,JavaScript 是一門單線程語言,非同步作業都是放到事件迴圈隊列裡面,等待主執行棧來執行的,並沒有專門的非同步執行線程。

參考文獻

這一次,徹底弄懂 JavaScript 執行機制 Tasks, microtasks, queues and schedules 從一道題淺說 JavaScript 的事件迴圈

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: