資訊專欄INFORMATION COLUMN
摘要：常見應用則是為了完成一些更新應用程序狀態(tài)的較小的任務，如處理的回調和的修改，以便讓這些任務在瀏覽器重新渲染之前執(zhí)行。常見應用執(zhí)行順序的實現(xiàn)需要至少一個和至少一個。
簡介
我們在上一篇 《淺析 JS 中的EventLoop 事件循環(huán)》 中提到一個 Event Queue，其實在事件循環(huán)中 queue 一共有兩種，還有一種叫 Job Queue
其中
Event Queue 在 HTML 規(guī)范中被稱為 Task Queue，但是為了區(qū)分，一般都叫作 Macrotask QueueMacrotask
Job Queue 是在 ECMAScript 規(guī)范中談及處理 Promise 回調時提到的，但是由于和 V8 中的實現(xiàn)比較相似，所以一般都稱為 Microtask Queue
Macrotasks 包含了解析 HTML、生成 DOM、執(zhí)行主線程 JS 代碼和其他事件如 頁面加載、輸入、網(wǎng)絡事件、定時器事件等。從瀏覽器的角度，Macrotask 代表的是一些離散的獨立的工作。
常見應用
setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering
Microtasks 則是為了完成一些更新應用程序狀態(tài)的較小的任務，如處理 Promise 的回調和 DOM 的修改，以便讓這些任務在瀏覽器重新渲染之前執(zhí)行。Microtask 應該以異步的方式盡快執(zhí)行，所以它們的開銷比 Macrotask 要小，并且可以使我們在 UI 重新渲染之前執(zhí)行，避免了不必要的 UI 渲染。
常見應用
process.nextTick, Promises, Object.observe, MutationObserver
Event Loop 的實現(xiàn)需要至少一個 Macrotask Queue 和至少一個 Microtask Queue。為了便于理解，我們都簡化成一個。
簡單來說，Microtask Queue 具有更高的優(yōu)先級，即執(zhí)行一個 Macrotask 任務后，就會清空整個 Microtask Queue，此時如果有新的 Microtask 加入也會被執(zhí)行。
所以我們來看下面的代碼：
執(zhí)行順序是什么？
我們已經(jīng)知道 setTimeout 是 Macrotask，Promise 是 Microtask，而這段代碼從上到下執(zhí)行也是一個 Macrotask
步驟：
開始執(zhí)行，執(zhí)行腳本作為一個任務進入 Macrotask Queue，同時進入調用棧執(zhí)行
Line 1, 輸出 script start
Line 3 的 setTimeout 回調進入 Macrotask Queue 等待
Line 7 的回調進入 Microtask Queue 等待
Line 13 輸出 script end，此時腳本執(zhí)行完成（即完成了一個 Macrotask）
開始執(zhí)行 Microtask Queue，從中拿出一個放入調用棧執(zhí)行
開始執(zhí)行 Line 7 的回調，該回調輸出 promise1，返回 undefined
Line 9 的回調進入 Microtask Queue，由于 Microtask Queue 沒有清空，直接執(zhí)行該回調，輸出 promise2，該回調返回 undefined
Microtask Queue 已清空（此時瀏覽器可以更新渲染UI），開始將 Macrotask Queue 中任務放入調用棧執(zhí)行
執(zhí)行 Line 3 的回調，輸出 setTimeout，Macrotask Queue 清空
程序執(zhí)行完成
所以打印順序為：
script start -> script end -> promise1 -> promise2 -> setTimeout
PS. 上面的這段代碼執(zhí)行流程，建議看原文的倒數(shù)第二篇參考文章，有動態(tài)交互操作可以演練。
總結Microtask 相比 Macrotask 具有更高的優(yōu)先級
Macrotask 總是在 JS 代碼執(zhí)行完成并且 Microtask Queue 清空之后執(zhí)行
JS 代碼執(zhí)行本身也是一個 Macrotask
Microtask Queue 清空后有可能會重新渲染 UI
Promise 屬于 Microtask，setTimeout 屬于 Macrotask
總體的執(zhí)行順序為：常規(guī)代碼 -> 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
公眾號：碼力全開
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104508.html
摘要：核心的異步延遲函數(shù)，用于異步延遲調用函數(shù)優(yōu)先使用原生原本支持更廣，但在的中，觸摸事件處理程序中觸發(fā)會產(chǎn)生嚴重錯誤的，回調被推入隊列但是隊列可能不會如期執(zhí)行。 淺析 Vue 2.6 中的 nextTick 方法。 事件循環(huán) JS 的 事件循環(huán) 和 任務隊列 其實是理解 nextTick 概念的關鍵。這個網(wǎng)上其實有很多優(yōu)質的文章做了詳細介紹，我就簡單過過了。 以下內容適用于瀏覽器端 JS，...
摘要：瀏覽器中與中事件循環(huán)與執(zhí)行機制不同，不可混為一談。瀏覽器環(huán)境執(zhí)行為單線程不考慮，所有代碼皆在執(zhí)行線程調用棧完成執(zhí)行。參考文章強烈推薦不要混淆和瀏覽器中的強烈推薦中的模塊強烈推薦理解事件循環(huán)一淺析定時器詳解 注意 在 node 11 版本中，node 下 Event Loop 已經(jīng)與瀏覽器趨于相同。在 node 11 版本中，node 下 Event Loop 已經(jīng)與瀏覽器趨于相同。在 ...
摘要：主線程會暫時存儲等異步操作，直接向下執(zhí)行，當某個異步事件觸發(fā)時，再通知主線程執(zhí)行相應的回調函數(shù)，通過這種機制，避免了單線程中異步操作耗時對后續(xù)任務的影響。 背景 在研究js的異步的實現(xiàn)方式的時候，發(fā)現(xiàn)了JavaScript 中的 macrotask 和 microtask 的概念。在查閱了一番資料之后，對其中的執(zhí)行機制有所了解，下面整理出來，希望可以幫助更多人。 先了解一下js的任務執(zhí)...
摘要：一句話解釋在事件循環(huán)機制中，有任務兩個隊列隊列和隊列。設置任務為目前運行的任務，并執(zhí)行。應該是考慮到了這一點，至少任務中的任務，是被設置了在一個事件循環(huán)中的最大調用次數(shù)的，叫。參考材料理解事件循環(huán) 在Node學習過程中，不可避免的需要對事件循環(huán)機制做深入理解，其中Macrotask（大型任務）和Microtask（小型任務）比較令人困惑，在一番google之后，我發(fā)現(xiàn)了幾篇資料能比較好...
摘要：如果沒到毫秒，那么階段就會跳過，進入階段，先執(zhí)行的回調函數(shù)。參考文檔什么是瀏覽器的事件循環(huán)不要混淆和瀏覽器中的定時器詳解瀏覽器和不同的事件循環(huán)深入理解事件循環(huán)機制篇中的執(zhí)行機制 最近對Event loop比較感興趣，所以了解了一下。但是發(fā)現(xiàn)整個Event loop盡管有很多篇文章，但是沒有一篇可以看完就對它所有內容都了解的文章。大部分的文章都只闡述了瀏覽器或者Node二者之一，沒有對比...
閱讀 3175·2021-10-14 09:42
閱讀 3569·2019-08-26 13:56
閱讀 3464·2019-08-26 11:59
閱讀 943·2019-08-23 18:00
閱讀 2208·2019-08-23 17:51
閱讀 3530·2019-08-23 17:17
閱讀 1481·2019-08-23 15:11
閱讀 5176·2019-08-23 15:05
