深入淺析JS中事件循環(huán)和宏任務微任務的原理

深入淺析JS中事件循環(huán)和宏任務微任務的原理？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

首先看一段代碼：

打印順序是什么？

正確答案：script start, script end, promise1, promise2, setTimeout

其中涉及到事件循環(huán)（event loop），宏任務（macrotask），微任務(microtask)

一、事件循環(huán) Event Loop

程序中設(shè)置兩個線程：一個負責程序本身的運行，稱為"主線程"；另一個負責主線程與其他進程（主要是各種I/O操作）的通信，被稱為"Event Loop線程"（可以譯為"消息線程"）。

所有任務可以分成兩種，一種是同步任務（synchronous），另一種是異步任務（asynchronous）。

同步任務指的是，在主線程上排隊執(zhí)行的任務，只有前一個任務執(zhí)行完畢，才能執(zhí)行后一個任務；

異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有"任務隊列"通知主線程，某個異步任務可以執(zhí)行了，該任務才會進入主線程執(zhí)行。

一般而言，異步任務有以下三種類型：

　　1、普通事件，如click、resize等

　　2、資源加載，如load、error等

　　3、定時器，包括setInterval、setTimeout等

事件循環(huán)具體過程就是：

• 同步任務進入主線程，異步任務進入Event Table并注冊函數(shù)。
• 當異步任務完成時，Event Table會將這個函數(shù)移入Event Queue。
• 主線程內(nèi)的任務執(zhí)行完畢執(zhí)行棧為空，會去Event Queue讀取對應的函數(shù)，進入主線程執(zhí)行。
• 上述過程會不斷重復，也就是常說的Event Loop(事件循環(huán))。

二、宏任務與微任務

在JavaScript中，任務被分為兩種，一種宏任務（MacroTask），一種叫微任務（MicroTask）。

2.1MacroTask（宏任務）

宿主環(huán)境提供的（瀏覽器和node）

script全部代碼、setTimeout、setInterval。

瀏覽器為了能夠使得JS內(nèi)部task與DOM任務能夠有序的執(zhí)行，會在一個task執(zhí)行結(jié)束后，在下一個 task 執(zhí)行開始前，對頁面進行重新渲染 （task->渲染->task->...）

2.2MicroTask（微任務）

語言標準提供的

Promise、await

async函數(shù)表示函數(shù)里面可能會有異步方法，await后面跟一個表達式，async方法執(zhí)行時，遇到await會立即執(zhí)行表達式，然后把await表達式后面的代碼放到微任務隊列里，讓出執(zhí)行棧讓同步代碼先執(zhí)行

async function foo() {
  var a = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(1);
    }, 2000);
  });
  console.log(a); // 第2秒時輸出: 1
}
foo();

2.3宏任務與微任務執(zhí)行順序：

• 執(zhí)行棧在執(zhí)行完同步任務后，查看執(zhí)行棧是否為空，如果執(zhí)行棧為空，就會去檢查微任務隊列是否為空，如果為空的話，就執(zhí)行宏任務，否則就一次性執(zhí)行完所有微任務。
• 每次單個宏任務執(zhí)行完畢后，檢查微任務隊列是否為空，如果不為空的話，會按照先入先出的規(guī)則全部執(zhí)行完微任務后，設(shè)置微任務隊列為null，然后再執(zhí)行宏任務，如此循環(huán)。

總結(jié)：同步—>微任務—>宏任務

關(guān)于深入淺析JS中事件循環(huán)和宏任務微任務的原理問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。