深入探讨异步：微任务、宏任务和事件循环-js教程-PHP中文网

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

Linda Hamilton

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

原创

1026 人浏览过

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');

登录后复制