深入探讨异步：微任务、宏任务和事件循环

JavaScript 的异步特性在您深入研究其机制之前可能会让人感觉很神奇。秘密在于它的事件循环，它协调两个关键角色：微任务和宏任务。但它们是什么、它们如何工作以及它们为什么重要？让我们通过深入研究、示例和技巧来解开这个谜团，以掌握这个概念。

---

事件循环和任务队列

JavaScript 引擎在单个线程中执行代码。为了处理异步操作，它依赖于事件循环，它在调用堆栈和任务队列之间进行协调。这些任务队列分为两类：微任务和宏任务。

微任务

微任务是高优先级任务，必须在当前执行的 JavaScript 代码完成且调用堆栈为空时立即执行。它们确保快速的后续行动和一致的状态。常见示例包括：

• 承诺（.then，异步/等待）
• MutationObserver 回调

宏任务

宏任务是优先级较低的任务，事件循环仅在所有微任务执行完毕后才处理。它们处理更大的、延迟的操作和外部事件。常见示例包括：

• 计时器（setTimeout、setInterval）
• 消息通道回调
• I/O 操作

还有 requestAnimationFrame，它不属于任一队列。它与浏览器的渲染周期同步，非常适合流畅的动画。

---

如何运作

以下是事件循环处理任务的方式：

1. 首先执行同步代码。
2. 清除微任务队列。
3. 执行宏任务队列中的一项任务。
4. 重复步骤 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');

---

预期输出

输出序列有助于阐明优先级：

1. 同步代码：“同步代码开始”、“同步代码结束”
2. 微任务：
   • “微任务：承诺然后 1”
   • “微任务：先承诺 2”
   • “微任务：MutationObserver”
3. 宏任务：
   • “宏任务：setTimeout”
   • “宏任务：MessageChannel”
   • “宏任务：setInterval”
4. requestAnimationFrame：“任务队列外部：requestAnimationFrame”

深入探讨：微任务与宏任务

微任务：关键特征

• 同步代码完成后立即执行。
• 非常适合小型、高优先级的更新，例如解决承诺或对 DOM 突变做出反应。
• 示例：Promise、MutationObserver。

宏任务：关键特征

• 仅在清除所有微任务后运行。
• 用于较大、优先级较低的操作或外部事件处理。
• 示例：计时器、消息通道。

requestAnimationFrame：奇怪的一个

虽然不是任务队列的一部分，requestAnimationFrame 在异步中发挥着独特的作用。它安排代码在下一次浏览器重绘之前运行，确保最少的帧丢失和更流畅的动画。

---

结论

微任务、宏任务和事件循环之间的相互作用是 JavaScript 异步的核心。通过理解和利用这些概念，您可以编写更高效、可维护和高性能的代码。请记住：首先是微任务，其次是宏任务，然后使用 requestAnimationFrame 进行视觉美化。快乐编码！

以上是深入探讨异步：微任务、宏任务和事件循环的详细内容。更多信息请关注PHP中文网其他相关文章！