首页 > 文章 > 前端

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

时间：2025-01-11 18:33:38 297浏览收藏

本篇文章向大家介绍《深入探讨异步：微任务、宏任务和事件循环》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

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

JavaScript的异步特性，在深入了解其底层机制前，可能显得神秘莫测。其核心在于事件循环 (Event Loop)，它协调着两个关键角色：微任务 (Microtask) 和宏任务 (Macrotask)。本文将深入探讨它们的概念、运作机制以及实际应用，帮助您掌握JavaScript异步编程的精髓。

事件循环与任务队列

JavaScript引擎单线程执行代码。为了处理异步操作，它依赖于事件循环，在调用栈 (Call Stack) 和任务队列之间进行协调。任务队列分为微任务队列和宏任务队列。

微任务

微任务具有高优先级，在当前JavaScript代码执行完毕且调用栈为空后立即执行。它们确保快速响应和状态一致性。常见示例包括：

Promise (.then, async/await)
MutationObserver 回调函数

宏任务

宏任务优先级较低，只有在所有微任务执行完毕后，事件循环才会处理它们。它们处理耗时操作和外部事件。常见示例包括：

计时器 (setTimeout, setInterval)
消息通道 (MessageChannel) 回调函数
I/O操作

此外，requestAnimationFrame 并不属于任何队列。它与浏览器渲染周期同步，非常适合动画渲染。

工作机制

事件循环处理任务的步骤如下：

执行同步代码。
清空微任务队列。
执行宏任务队列中的一个任务。
重复步骤2和3，直到所有任务处理完毕。

这种优先级机制保证了高优先级任务（如Promise）优先执行，而低优先级任务（如计时器）稍后处理。

实际应用示例

以下代码片段演示了同步代码、微任务、宏任务和requestAnimationFrame的交互：

console.log('同步代码开始');

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

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

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

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

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

// requestAnimationFrame
requestAnimationFrame(() => {
  console.log('不在任务队列中: requestAnimationFrame');
});

console.log('同步代码结束');