揭开事件循环的幕布：宏任务与微任务的奥秘

2023-10-13 16:19:22

前言

如果你是一位经验丰富的 JavaScript 开发人员，必定对事件循环的概念并不陌生。它是一个巧妙的机制，负责处理事件、管理异步操作并协调整个 JavaScript 应用程序。然而，深入了解事件循环内部运作，尤其是区分宏任务和微任务，对于掌握 JavaScript 的精髓至关重要。

事件循环的本质

事件循环是 JavaScript 引擎的核心，它负责管理应用程序中所有事件的执行顺序。当一个事件被触发（例如点击按钮、网络请求完成或超时），它将被添加到事件队列中。事件循环不断轮询此队列，按顺序执行其中的事件。

为了确保高效性和响应性，事件循环被划分为两个不同的阶段：宏任务阶段和微任务阶段。

宏任务

宏任务是任何需要相当长时间才能执行的操作。它们包括：

网络请求（XMLHttpRequest、Fetch API）
setTimeout() 和 setInterval() 函数
UI 渲染

当宏任务阶段开始时，事件循环将从事件队列中取出第一个宏任务并执行它。在执行期间，事件循环将阻塞所有其他操作，包括用户交互。

微任务

微任务是比宏任务更轻量级的操作。它们包括：

Promise 的回调函数
MutationObserver 回调
事件监听器（例如 click、keydown）

当宏任务完成执行时，事件循环将进入微任务阶段。在这个阶段，它将从事件队列中取出所有待处理的微任务并依次执行它们。与宏任务不同，微任务在执行期间不会阻塞其他操作。

宏任务和微任务的差异

虽然宏任务和微任务都是事件循环的一部分，但它们具有以下关键差异：

执行顺序： 宏任务在微任务之后执行。
阻塞： 宏任务会阻塞事件循环，而微任务不会。
优先级： 微任务具有更高的优先级，总是先于宏任务执行。

理解宏任务和微任务的重要性

理解宏任务和微任务之间的差异对于掌握异步 JavaScript 编程至关重要。它使您可以控制代码的执行顺序，避免意外行为并创建流畅、响应迅速的应用程序。

示例场景

以下是一个展示宏任务和微任务差异的示例场景：

// 宏任务：执行网络请求
setTimeout(() => {
  console.log('宏任务');
}, 0);

// 微任务：执行 Promise 回调
Promise.resolve().then(() => {
  console.log('微任务 1');
});

// 微任务：执行 MutationObserver 回调
const observer = new MutationObserver(() => {
  console.log('微任务 2');
});
observer.observe(document.body, { attributes: true });

// 宏任务：更新 DOM
requestAnimationFrame(() => {
  console.log('宏任务');
});