建站
咨詢
售后
建站咨詢
新聞中心
事件循環(huán)：微任務和宏任務
創(chuàng)新互聯(lián)公司主營曹縣網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,重慶APP開發(fā),曹縣h5微信小程序定制開發(fā)搭建,曹縣網(wǎng)站營銷推廣歡迎曹縣等地區(qū)企業(yè)咨詢
瀏覽器中 JavaScript 的執(zhí)行流程和 Node.js 中的流程都是基于 事件循環(huán) 的。
理解事件循環(huán)的工作方式對于代碼優(yōu)化很重要，有時對于正確的架構(gòu)也很重要。
在本章中，我們首先介紹有關(guān)事件循環(huán)工作方式的理論細節(jié)，然后介紹該知識的實際應用。
事件循環(huán)
事件循環(huán) 的概念非常簡單。它是一個在 JavaScript 引擎等待任務，執(zhí)行任務和進入休眠狀態(tài)等待更多任務這幾個狀態(tài)之間轉(zhuǎn)換的無限循環(huán)。
引擎的一般算法：
1.當有任務時：
- 從最先進入的任務開始執(zhí)行。
2.休眠直到出現(xiàn)任務，然后轉(zhuǎn)到第 1 步。
當我們?yōu)g覽一個網(wǎng)頁時就是上述這種形式。JavaScript 引擎大多數(shù)時候不執(zhí)行任何操作，它僅在腳本/處理程序/事件激活時執(zhí)行。
任務示例：
- 當外部腳本
……但是我們也可能想在任務執(zhí)行期間展示一些東西，例如進度條。
如果我們使用 setTimeout 將繁重的任務拆分成幾部分，那么變化就會被在它們之間繪制出來。
這看起來更好看：
現(xiàn)在 div 顯示了 i 的值的增長，這就是進度條的一種。
用例 3：在事件之后做一些事情
在事件處理程序中，我們可能會決定推遲某些行為，直到事件冒泡并在所有級別上得到處理后。我們可以通過將該代碼包裝到零延遲的 setTimeout 中來做到這一點。
在 創(chuàng)建自定義事件[1] 一章中，我們看到過這樣一個例子：自定義事件 menu-open 被在 setTimeout 中分派(dispatched)，所以它在 click 事件被處理完成之后發(fā)生。
- menu.onclick = function() {
- // ...
- // 創(chuàng)建一個具有被點擊的菜單項的數(shù)據(jù)的自定義事件
- let customEvent = new CustomEvent("menu-open", {
- bubbles: true
- });
- // 異步分派（dispatch）自定義事件
- setTimeout(() => menu.dispatchEvent(customEvent));
- };
宏任務和微任務
除了本章中所講的 宏任務(macrotask) 外，還有在 微任務隊列[2] 一章中提到的 微任務(microtask)。
微任務僅來自于我們的代碼。它們通常是由 promise 創(chuàng)建的：對 .then/catch/finally 處理程序的執(zhí)行會成為微任務。微任務也被用于 await 的“幕后”，因為它是 promise 處理的另一種形式。
還有一個特殊的函數(shù) queueMicrotask(func)，它對 func 進行排隊，以在微任務隊列中執(zhí)行。
每個宏任務之后，引擎會立即執(zhí)行微任務隊列中的所有任務，然后再執(zhí)行其他的宏任務，或渲染，或進行其他任何操作。
例如，看看下面這個示例：
- setTimeout(() => alert("timeout"));
- Promise.resolve()
- .then(() => alert("promise"));
- alert("code");
這里的執(zhí)行順序是怎樣的?
- code 首先顯示，因為它是常規(guī)的同步調(diào)用。
- promise 第二個出現(xiàn)，因為 then 會通過微任務隊列，并在當前代碼之后執(zhí)行。
- timeout 最后顯示，因為它是一個宏任務。
更詳細的事件循環(huán)圖示如下(順序是從上到下，即：首先是腳本，然后是微任務，渲染等)：
微任務會在執(zhí)行任何其他事件處理，或渲染，或執(zhí)行任何其他宏任務之前完成。
這很重要，因為它確保了微任務之間的應用程序環(huán)境基本相同(沒有鼠標坐標更改，沒有新的網(wǎng)絡數(shù)據(jù)等)。
如果我們想要異步執(zhí)行(在當前代碼之后)一個函數(shù)，但是要在更改被渲染或新事件被處理之前執(zhí)行，那么我們可以使用 queueMicrotask 來對其進行安排(schedule)。
這是一個與前面那個例子類似的，帶有“計數(shù)進度條”的示例，但是它使用了 queueMicrotask而不是 setTimeout。你可以看到它在最后才渲染。就像寫的是同步代碼一樣：
總結(jié)
更詳細的事件循環(huán)算法(盡管與 規(guī)范[3] 相比仍然是簡化過的)：
1.從 宏任務 隊列(例如 "script")中出隊(dequeue)并執(zhí)行最早的任務。
2.執(zhí)行所有 微任務：
- 出隊(dequeue)并執(zhí)行最早的微任務。
- 當微任務隊列非空時：
3.執(zhí)行渲染，如果有。
4.如果宏任務隊列為空，則休眠直到出現(xiàn)宏任務。
5.轉(zhuǎn)到步驟 1。
安排(schedule)一個新的 宏任務：
- 使用零延遲的 setTimeout(f)。
它可被用于將繁重的計算任務拆分成多個部分，以使瀏覽器能夠?qū)τ脩羰录鞒龇磻?，并在任務的各部分之間顯示任務進度。
此外，也被用于在事件處理程序中，將一個行為(action)安排(schedule)在事件被完全處理(冒泡完成)后。
安排一個新的 微任務：
- 使用 queueMicrotask(f)。
- promise 處理程序也會通過微任務隊列。
在微任務之間沒有 UI 或網(wǎng)絡事件的處理：它們一個立即接一個地執(zhí)行。
所以，我們可以使用 queueMicrotask 來在保持環(huán)境狀態(tài)一致的情況下，異步地執(zhí)行一個函數(shù)。
Web Workers:
對于不應該阻塞事件循環(huán)的耗時長的繁重計算任務，我們可以使用 Web Workers[4]。
這是在另一個并行線程中運行代碼的方式。
Web Workers 可以與主線程交換消息，但是它們具有自己的變量和事件循環(huán)。
Web Workers 沒有訪問 DOM 的權(quán)限，因此，它們對于同時使用多個 CPU 內(nèi)核的計算非常有用。
參考資料
[1]創(chuàng)建自定義事件: https://zh.javascript.info/dispatch-events
[2]微任務隊列: https://zh.javascript.info/microtask-queue
[3]規(guī)范: https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model
[4]Web Workers: https://html.spec.whatwg.org/multipage/workers.html
[5]React 官方文檔推薦，與 MDN 并列的 JavaScript 學習教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources
本文轉(zhuǎn)載自微信公眾號「技術(shù)漫談」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系技術(shù)漫談公眾號。
當前標題：圖解JavaScript事件循環(huán)：微任務和宏任務
鏈接地址：http://m.5511xx.com/article/codicpd.html
