宏任务与微任务

原创于 2025-08-13 18:30:00 发布 · 435 阅读

CC 4.0 BY-SA版权

文章标签：

宏任务与微任务

在JavaScript的事件循环机制中，“宏任务”（macrotask）和“微任务”（microtask）是两个关键概念，用于管理异步代码的执行顺序。理解它们有助于避免常见的陷阱，如回调顺序混乱或UI阻塞。下面我将逐步解释它们的定义、区别、执行顺序以及实际应用。

1. 宏任务和微任务的定义

宏任务（macrotask）：代表较大的异步操作单元，通常包括：
- 整体脚本的执行（如初始代码）。
- setTimeout 和 setInterval 的回调。
- I/O 操作（如文件读写）。
- UI 渲染事件。宏任务在事件循环的每个“轮次”（tick）中执行一个。
微任务（microtask）：代表较小的、高优先级的异步操作单元，通常包括：
- Promise 的回调（如 .then()、.catch()）。
- MutationObserver 的回调。
- queueMicrotask() 函数。微任务在宏任务执行完毕后立即执行，且在当前事件循环轮次结束前处理所有微任务。

2. 区别和关系

优先级差异：微任务优先级高于宏任务。当一个宏任务完成后，JavaScript引擎会先执行所有微任务队列中的任务，然后再执行下一个宏任务。
执行时机：
- 宏任务在事件循环的“任务队列”中排队。
- 微任务在“微任务队列”中排队，并在当前宏任务结束后立即清空。
关键点：微任务队列必须在每个宏任务之间完全清空，否则会导致事件循环阻塞。这确保了高优先级操作（如Promise）能快速响应。

3. 执行顺序图解

事件循环的顺序如下：

执行一个宏任务（例如，运行脚本）。
执行所有可用的微任务（直到微任务队列为空）。
可选：进行UI渲染。
重复步骤1，处理下一个宏任务。

一个简单的代码示例能清晰展示顺序：

console.log('脚本开始'); // 宏任务（初始脚本）

setTimeout(() => {
  console.log('setTimeout'); // 宏任务（定时器回调）
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 微任务'); // 微任务（Promise回调）
});

console.log('脚本结束'); // 宏任务（初始脚本继续）

输出顺序：

脚本开始（宏任务）
脚本结束（宏任务）
Promise 微任务（微任务，在宏任务后立即执行）
setTimeout（宏任务，在下一个事件循环轮次执行）

解释：初始脚本是一个宏任务，执行中遇到setTimeout（宏任务）和Promise.then()（微任务）。宏任务完成后，引擎先清空微任务队列（输出Promise 微任务），然后才处理下一个宏任务（setTimeout）。

4. 实际应用和注意事项

避免性能问题：过度使用微任务（如嵌套Promise）可能导致“微任务饥饿”，阻塞事件循环。建议：
- 将耗时操作（如I/O）放入宏任务。
- 微任务用于轻量级操作（如状态更新）。
调试技巧：在异步代码中，使用console.log跟踪顺序，或工具如Chrome中的DevTools的“Performance”面板。
常见场景：
- UI更新：微任务确保DOM变更快速响应（如通过MutationObserver）。
- 数据流控制：在Promise链中，微任务保证回调顺序一致。