JavaScript 的非同步特性在您深入研究其機制之前可能會讓人感覺很神奇。秘密在於它的事件循環(huán)，它協(xié)調(diào)兩個關(guān)鍵角色：微任務(wù)和宏任務(wù)。但它們是什麼、它們?nèi)绾芜\作以及為什麼它們重要？讓我們透過深入研究、範例和技巧來解開這個謎團，以掌握這個概念。

---

事件循環(huán)與任務(wù)佇列

JavaScript 引擎在單一執(zhí)行緒中執(zhí)行程式碼。為了處理非同步操作，它依賴事件循環(huán)，它在呼叫堆疊和任務(wù)佇列之間進行協(xié)調(diào)。這些任務(wù)隊列分為兩類：微任務(wù)和宏任務(wù)。

微任務(wù)

微任務(wù)是高優(yōu)先權(quán)任務(wù)，必須在目前執(zhí)行的 JavaScript 程式碼完成且呼叫堆疊為空時立即執(zhí)行。它們確?？焖俚尼崂m(xù)行動和一致的狀態(tài)。常見範例包括：

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

宏任務(wù)

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

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

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

---

如何運作

以下是事件循環(huán)處理任務(wù)的方式：

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

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

---

實際應(yīng)用範例

下面是一個實用的程式碼片段，用來說明同步程式碼、微任務(wù)、巨集任務(wù)和 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');

---

預(yù)期輸出

輸出序列有助於闡明優(yōu)先順序：

1. 同步程式碼：「同步程式碼開始」、「同步程式碼結(jié)束」
2. 微任務(wù)：
   • 「微任務(wù)：承諾然後 1」
   • 「微任務(wù)：先承諾 2」
   • 「微任務(wù)：MutationObserver」
3. 宏任務(wù)：
   • 「宏任務(wù)：setTimeout」
   • 「巨集任務(wù)：MessageChannel」
   • 「宏任務(wù)：setInterval」
4. requestAnimationFrame：「任務(wù)佇列外部：requestAnimationFrame」

深入探討：微任務(wù)與宏任務(wù)

微任務(wù)：關(guān)鍵特徵

• 同步程式碼完成後立即執(zhí)行。
• 非常適合小型、高優(yōu)先級的更新，例如解決承諾或?qū)?DOM 突變做出反應(yīng)。
• 範例：Promise、MutationObserver。

宏任務(wù)：關(guān)鍵特徵

• 僅在清除所有微任務(wù)後運行。
• 用於較大、優(yōu)先順序較低的操作或外部事件處理。
• 範例：計時器、訊息通道。

requestAnimationFrame：奇怪的一個

雖然不是任務(wù)佇列的一部分，requestAnimationFrame 在非同步中發(fā)揮著獨特的作用。它安排程式碼在下一次瀏覽器重繪之前運行，確保最少的幀丟失和更流暢的動畫。

---

結(jié)論

微任務(wù)、巨集任務(wù)和事件循環(huán)之間的交互作用是 JavaScript 非同步的核心。透過理解和利用這些概念，您可以編寫更有效率、可維護和高效能的程式碼。請記?。菏紫仁俏⑷蝿?wù)，其次是巨集任務(wù)，然後使用 requestAnimationFrame 進行視覺美化?？鞓肪幋a！

以上是深入探討非同步：微任務(wù)、巨集任務(wù)與事件循環(huán)的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！