淺析 JS 事件循環之 Microtask 和 Macrotask

sihai 發布于2019-08-23 18:00 / 1100人閱讀

摘要：常見應用則是為了完成一些更新應用程序狀態的較小的任務，如處理的回調和的修改，以便讓這些任務在瀏覽器重新渲染之前執行。常見應用執行順序的實現需要至少一個和至少一個。

簡介

我們在上一篇《淺析 JS 中的EventLoop 事件循環》中提到一個 Event Queue，其實在事件循環中 queue 一共有兩種，還有一種叫 Job Queue

其中

Event Queue 在 HTML 規范中被稱為 Task Queue，但是為了區分，一般都叫作 Macrotask Queue
Job Queue  是在 ECMAScript 規范中談及處理 Promise 回調時提到的，但是由于和 V8 中的實現比較相似，所以一般都稱為 Microtask Queue

Macrotask

Macrotasks 包含了解析 HTML、生成 DOM、執行主線程 JS 代碼和其他事件如頁面加載、輸入、網絡事件、定時器事件等。從瀏覽器的角度，Macrotask 代表的是一些離散的獨立的工作。

常見應用
setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering

Microtask

Microtasks 則是為了完成一些更新應用程序狀態的較小的任務，如處理 Promise 的回調和 DOM 的修改，以便讓這些任務在瀏覽器重新渲染之前執行。Microtask 應該以異步的方式盡快執行，所以它們的開銷比 Macrotask 要小，并且可以使我們在 UI 重新渲染之前執行，避免了不必要的 UI 渲染。

常見應用
process.nextTick, Promises, Object.observe, MutationObserver

執行順序

Event Loop 的實現需要至少一個 Macrotask Queue 和至少一個 Microtask Queue。為了便于理解，我們都簡化成一個。
簡單來說，Microtask Queue 具有更高的優先級，即執行一個 Macrotask 任務后，就會清空整個 Microtask Queue，此時如果有新的 Microtask 加入也會被執行。

所以我們來看下面的代碼：

執行順序是什么？
我們已經知道 setTimeout 是 Macrotask，Promise 是 Microtask，而這段代碼從上到下執行也是一個 Macrotask

步驟：

開始執行，執行腳本作為一個任務進入 Macrotask Queue，同時進入調用棧執行

Line 1, 輸出 script start

Line 3 的 setTimeout 回調進入 Macrotask Queue 等待

Line 7 的回調進入 Microtask Queue 等待

Line 13 輸出 script end，此時腳本執行完成（即完成了一個 Macrotask）

開始執行 Microtask Queue，從中拿出一個放入調用棧執行

開始執行 Line 7 的回調，該回調輸出 promise1，返回 undefined

Line 9 的回調進入 Microtask Queue，由于 Microtask Queue 沒有清空，直接執行該回調，輸出 promise2，該回調返回 undefined

Microtask Queue 已清空（此時瀏覽器可以更新渲染UI），開始將 Macrotask Queue 中任務放入調用棧執行

執行 Line 3 的回調，輸出 setTimeout，Macrotask Queue 清空

程序執行完成

所以打印順序為：

script start -> script end -> promise1 -> promise2 -> setTimeout

PS. 上面的這段代碼執行流程，建議看原文的倒數第二篇參考文章，有動態交互操作可以演練。

總結

Microtask 相比 Macrotask 具有更高的優先級

Macrotask 總是在 JS 代碼執行完成并且 Microtask Queue 清空之后執行

JS 代碼執行本身也是一個 Macrotask

Microtask Queue 清空后有可能會重新渲染 UI

Promise 屬于 Microtask，setTimeout 屬于 Macrotask

總體的執行順序為：常規代碼 -> promises -> events 和 setTimeout 等

參考文章

原文鏈接
ECMA262 Job Queues
HTML Standard Task Queue
HTML系列：macrotask和microtask
microtask and macrotask a hands on approach
difference-between-microtask-and-macrotask-within-an-event-loop-context

公眾號：碼力全開

GPU云服務器云服務器 js事件循環機制 gpu python事件循環 microtask macrotask

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.hztianpu.com/yun/104508.html

淺析 Vue 2.6 中的 nextTick 方法

摘要：核心的異步延遲函數，用于異步延遲調用函數優先使用原生原本支持更廣，但在的中，觸摸事件處理程序中觸發會產生嚴重錯誤的，回調被推入隊列但是隊列可能不會如期執行。淺析 Vue 2.6 中的 nextTick 方法。事件循環 JS 的事件循環和任務隊列其實是理解 nextTick 概念的關鍵。這個網上其實有很多優質的文章做了詳細介紹，我就簡單過過了。以下內容適用于瀏覽器端 JS，...

fobnn 2019-08-23 15:32 評論0 收藏0
瀏覽器和Node不同的事件循環（Event Loop）

摘要：瀏覽器中與中事件循環與執行機制不同，不可混為一談。瀏覽器環境執行為單線程不考慮，所有代碼皆在執行線程調用棧完成執行。參考文章強烈推薦不要混淆和瀏覽器中的強烈推薦中的模塊強烈推薦理解事件循環一淺析定時器詳解注意在 node 11 版本中，node 下 Event Loop 已經與瀏覽器趨于相同。在 node 11 版本中，node 下 Event Loop 已經與瀏覽器趨于相同。在 ...

haitiancoder 2019-08-22 15:18 評論0 收藏0
理解javascript中的事件循環(Event Loop)

摘要：主線程會暫時存儲等異步操作，直接向下執行，當某個異步事件觸發時，再通知主線程執行相應的回調函數，通過這種機制，避免了單線程中異步操作耗時對后續任務的影響。背景在研究js的異步的實現方式的時候，發現了JavaScript 中的 macrotask 和 microtask 的概念。在查閱了一番資料之后，對其中的執行機制有所了解，下面整理出來，希望可以幫助更多人。先了解一下js的任務執...

mykurisu 2019-08-26 11:56 評論0 收藏0
【新手向】Node.js事件循環中的：Macrotask 與 Microtask

摘要：一句話解釋在事件循環機制中，有任務兩個隊列隊列和隊列。設置任務為目前運行的任務，并執行。應該是考慮到了這一點，至少任務中的任務，是被設置了在一個事件循環中的最大調用次數的，叫。參考材料理解事件循環在Node學習過程中，不可避免的需要對事件循環機制做深入理解，其中Macrotask（大型任務）和Microtask（小型任務）比較令人困惑，在一番google之后，我發現了幾篇資料能比較好...

CoderDock 2019-08-22 10:47 評論0 收藏0
一篇文章教會你Event loop——瀏覽器和Node

摘要：如果沒到毫秒，那么階段就會跳過，進入階段，先執行的回調函數。參考文檔什么是瀏覽器的事件循環不要混淆和瀏覽器中的定時器詳解瀏覽器和不同的事件循環深入理解事件循環機制篇中的執行機制最近對Event loop比較感興趣，所以了解了一下。但是發現整個Event loop盡管有很多篇文章，但是沒有一篇可以看完就對它所有內容都了解的文章。大部分的文章都只闡述了瀏覽器或者Node二者之一，沒有對比...

Leck1e 2019-08-22 15:33 評論0 收藏0