深入探討非同步：微任務、巨集任務與事件循環-js教程-PHP中文網

深入探討非同步：微任務、巨集任務與事件循環

Linda Hamilton

發布： 2025-01-01 08:23:10

原創

994 人瀏覽過

Deep Dive in Asynchrony: Microtasks, Macrotasks, and the Event Loop

JavaScript 的非同步特性在您深入研究其機制之前可能會讓人感覺很神奇。秘密在於它的事件循環，它協調兩個關鍵角色：微任務和宏任務。但它們是什麼、它們如何運作以及為什麼它們重要？讓我們透過深入研究、範例和技巧來解開這個謎團，以掌握這個概念。

事件循環與任務佇列

JavaScript 引擎在單一執行緒中執行程式碼。為了處理非同步操作，它依賴事件循環，它在呼叫堆疊和任務佇列之間進行協調。這些任務隊列分為兩類：微任務和宏任務。

微任務

微任務是高優先權任務，必須在目前執行的 JavaScript 程式碼完成且呼叫堆疊為空時立即執行。它們確保快速的後續行動和一致的狀態。常見範例包括：

承諾（.then，非同步/等待）
MutationObserver 回呼

宏任務

巨集任務是優先順序較低的任務，事件循環僅在所有微任務執行完畢後才處理。它們處理更大的、延遲的操作和外部事件。常見範例包括：

計時器（setTimeout、setInterval）
訊息頻道回呼
I/O 操作

還有 requestAnimationFrame，它不屬於任一佇列。它與瀏覽器的渲染週期同步，非常適合流暢的動畫。

如何運作

以下是事件循環處理任務的方式：

先執行同步程式碼。
清除微任務隊列。
執行宏任務佇列中的一項任務。
重複步驟 2 和 3，直到處理完所有任務。

這種優先順序確保先解決諸如承諾之類的高優先級任務，然後再解決諸如計時器之類的不太緊急的操作。

實際應用範例

下面是一個實用的程式碼片段，用來說明同步程式碼、微任務、巨集任務和 requestAnimationFrame 之間的互動：

console.log('Synchronous code starts');

// Macrotask: setTimeout
setTimeout(() => {
  console.log('Macrotask: setTimeout');
}, 0);

// Macrotask: setInterval
const intervalId = setInterval(() => {
  console.log('Macrotask: setInterval');
  clearInterval(intervalId);
}, 100);

// Microtask: Promise
Promise.resolve().then(() => {
  console.log('Microtask: Promise then 1');
  Promise.resolve().then(() => {
    console.log('Microtask: Promise then 2');
  });
});

// Microtask: MutationObserver
const observer = new MutationObserver(() => {
  console.log('Microtask: MutationObserver');
});
const targetNode = document.createElement('div');
observer.observe(targetNode, { attributes: true });
targetNode.setAttribute('data-test', 'true');

// Macrotask: MessageChannel
const channel = new MessageChannel();
channel.port1.onmessage = () => {
  console.log('Macrotask: MessageChannel');
};
channel.port2.postMessage('Test');

// requestAnimationFrame
requestAnimationFrame(() => {
  console.log('Outside task queues: requestAnimationFrame');
});

console.log('Synchronous code ends');

登入後複製