JavaScript 的異步特性在您深入研究其機制之前可能會讓人感覺很神奇。秘密在于它的事件循環(huán)，它協(xié)調(diào)兩個關(guān)鍵角色：微任務和宏任務。但它們是什么、它們?nèi)绾喂ぷ饕约八鼈優(yōu)槭裁粗匾孔屛覀兺ㄟ^深入研究、示例和技巧來解開這個謎團，以掌握這個概念。

---

事件循環(huán)和任務隊列

JavaScript 引擎在單個線程中執(zhí)行代碼。為了處理異步操作，它依賴于事件循環(huán)，它在調(diào)用堆棧和任務隊列之間進行協(xié)調(diào)。這些任務隊列分為兩類：微任務和宏任務。

微任務

微任務是高優(yōu)先級任務，必須在當前執(zhí)行的 JavaScript 代碼完成且調(diào)用堆棧為空時立即執(zhí)行。它們確?？焖俚暮罄m(xù)行動和一致的狀態(tài)。常見示例包括：

• 承諾（.then，異步/等待）
• MutationObserver 回調(diào)

宏任務

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

• 計時器（setTimeout、setInterval）
• 消息通道回調(diào)
• I/O 操作

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

---

如何運作

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

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

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

---

實際應用示例

下面是一個實用的代碼片段，用于說明同步代碼、微任務、宏任務和 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ōu)先級：

1. 同步代碼：“同步代碼開始”、“同步代碼結(jié)束”
2. 微任務：
   • “微任務：承諾然后 1”
   • “微任務：先承諾 2”
   • “微任務：MutationObserver”
3. 宏任務：
   • “宏任務：setTimeout”
   • “宏任務：MessageChannel”
   • “宏任務：setInterval”
4. requestAnimationFrame：“任務隊列外部：requestAnimationFrame”

深入探討：微任務與宏任務

微任務：關(guān)鍵特征

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

宏任務：關(guān)鍵特征

• 僅在清除所有微任務后運行。
• 用于較大、優(yōu)先級較低的操作或外部事件處理。
• 示例：計時器、消息通道。

requestAnimationFrame：奇怪的一個

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

---

結(jié)論

微任務、宏任務和事件循環(huán)之間的相互作用是 JavaScript 異步的核心。通過理解和利用這些概念，您可以編寫更高效、可維護和高性能的代碼。請記住：首先是微任務，其次是宏任務，然后使用 requestAnimationFrame 進行視覺美化?？鞓肪幋a！

以上是深入探討異步：微任務、宏任務和事件循環(huán)的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！