javascript中有哪些微任務

本篇內容主要講解“javascript中有哪些微任務”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“javascript中有哪些微任務”吧!

在javascript中，微任務包含：1、“Promise”；2、“Object.observe”；3、“MutationObserver”；4、Node.js環境下的“process.nextTick”；5、“async/await”。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

事件循環

JavaScript 語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。為了協調事件、用戶交互、腳本、UI 渲染和網絡處理等行為，防止主線程的不阻塞，Event Loop 的方案應用而生。Event Loop 包含兩類：一類是基于 Browsing Context，一種是基于 Worker。二者的運行是獨立的，也就是說，每一個 JavaScript 運行的"線程環境"都有一個獨立的 Event Loop，每一個 Web Worker 也有一個獨立的 Event Loop。

本文所涉及到的事件循環是基于 Browsing Context。

任務隊列

根據規范，事件循環是通過任務隊列的機制來進行協調的。一個 Event Loop 中，可以有一個或者多個任務隊列(task queue)，一個任務隊列便是一系列有序任務(task)的集合；每個任務都有一個任務源(task source)，源自同一個任務源的 task 必須放到同一個任務隊列，從不同源來的則被添加到不同隊列。setTimeout/Promise 等API便是任務源，而進入任務隊列的是他們指定的具體執行任務。

在事件循環中，每進行一次循環操作稱為 tick，每一次 tick 的任務處理模型是比較復雜的，但關鍵步驟如下：

• 在此次 tick 中選擇最先進入隊列的任務(oldest task)，如果有則執行(一次)

• 檢查是否存在 Microtasks，如果存在則不停地執行，直至清空 Microtasks Queue

• 更新 render

• 主線程重復執行上述步驟

在上訴tick的基礎上需要了解幾點：

• JS分為同步任務和異步任務

• 同步任務都在主線程上執行，形成一個執行棧

• 主線程之外，事件觸發線程管理著一個任務隊列，只要異步任務有了運行結果，就在任務隊列之中放置一個事件。

• 一旦執行棧中的所有同步任務執行完畢（此時JS引擎空閑），系統就會讀取任務隊列，將可運行的異步任務添加到可執行棧中，開始執行。

宏任務

(macro)task，可以理解是每次執行棧執行的代碼就是一個宏任務（包括每次從事件隊列中獲取一個事件回調并放到執行棧中執行）。

瀏覽器為了能夠使得JS內部(macro)task與DOM任務能夠有序的執行，會在一個(macro)task執行結束后，在下一個(macro)task 執行開始前，對頁面進行重新渲染，流程如下：

(macro)task->渲染->(macro)task->...

宏任務包含：

script(整體代碼)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 環境)

微任務

microtask,可以理解是在當前 task 執行結束后立即執行的任務。也就是說，在當前task任務后，下一個task之前，在渲染之前。

所以它的響應速度相比setTimeout（setTimeout是task）會更快，因為無需等渲染。也就是說，在某一個macrotask執行完后，就會將在它執行期間產生的所有microtask都執行完畢（在渲染前）。

微任務包含：

Promise
Object.observe
MutationObserver
process.nextTick(Node.js 環境)
async/await

運行機制

在事件循環中，每進行一次循環操作稱為 tick，每一次 tick 的任務處理模型是比較復雜的，但關鍵步驟如下：

• 執行一個宏任務（棧中沒有就從事件隊列中獲取）

• 執行過程中如果遇到微任務，就將它添加到微任務的任務隊列中

• 宏任務執行完畢后，立即執行當前微任務隊列中的所有微任務（依次執行）

• 當前宏任務執行完畢，開始檢查渲染，然后GUI線程接管渲染

• 渲染完畢后，JS線程繼續接管，開始下一個宏任務（從事件隊列中獲取）

如圖：

到此，相信大家對“javascript中有哪些微任務”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！