目录
JavaScript 的单线程特性使其一次只能执行一个任务，但通过事件循环机制，它能够高效处理异步操作。事件循环将任务分为宏任务（Macrotasks）和微任务（Microtasks），它们在执行优先级和用途上有所不同。本文将详细探讨宏任务和微任务的定义、类型、执行机制以及实际应用场景，帮助开发者更好地理解和优化异步代码。
宏任务（Macrotasks）的定义与类型
宏任务是事件循环中的主要工作单元，存储在任务队列（Task Queue）中，按"先进先出"（FIFO）的顺序执行。每个事件循环迭代通常只处理一个宏任务。宏任务通常涉及较大的操作，可能需要较长时间或依赖外部资源。以下是常见的宏任务类型：
| 宏任务类型 | 描述 |
|---|---|
| 脚本执行 | 初始 JavaScript 代码的执行，如 <script> 标签中的代码。 |
| setTimeout / setInterval | 定时器回调，延迟指定时间后将回调函数加入任务队列。 |
| I/O 操作 | 网络请求（如 fetch）、文件读写（Node.js 中）等异步操作的回调。 |
| UI 渲染 | 浏览器中更新 DOM 或执行页面渲染的操作。 |
| 事件回调 | 用户交互（如点击、键盘输入）触发的回调函数。 |
| requestAnimationFrame | 用于动画的回调，安排在下一次重绘之前执行。 |
| setImmediate | Node.js 中用于在当前事件循环迭代后立即执行的回调。 |
宏任务的执行依赖于调用栈为空，只有当当前执行的代码（同步代码或其他任务）完成后，事件循环才会从任务队列中取出下一个宏任务。
微任务（Microtasks）的定义与类型
微任务是优先级更高的任务，存储在微任务队列（Microtask Queue）中。它们在当前宏任务完成后、下一个宏任务开始前执行。微任务通常用于需要立即完成的小型操作，例如更新应用程序状态。以下是常见的微任务类型：
| 微任务类型 | 描述 |
|---|---|
| Promise 回调 | Promise 的 .then()、.catch()、.finally() 方法中的回调函数。 |
queueMicrotask() |
显式将函数加入微任务队列，用于异步但高优先级的操作。 |
MutationObserver |
监听 DOM 变化的回调，适用于需要快速响应 DOM 修改的场景。 |
process.nextTick |
Node.js 中用于在当前调用栈清空后立即执行的回调，优先级高于 Promise。 |
微任务的一个关键特性是，如果一个微任务在执行过程中又添加了新的微任务，这些新微任务也会在当前事件循环迭代中被处理，直到微任务队列清空。
事件循环的执行机制
JavaScript 的事件循环是管理宏任务和微任务的核心机制。以下是事件循环的详细步骤：
- 检查调用栈：事件循环首先检查调用栈是否为空。如果不为空，继续执行当前代码。
- 执行宏任务：从任务队列中取出一个宏任务并执行。
- 清空微任务队列：在当前宏任务完成后，事件循环会处理微任务队列中的所有任务。如果微任务执行过程中生成了新的微任务，这些任务也会被立即处理，直到微任务队列为空。
- 渲染（浏览器中）：如果需要，浏览器会执行渲染更新（如更新 DOM 或重绘页面）。
- 处理下一个宏任务：返回步骤 1，取出下一个宏任务继续执行。
这种机制确保了微任务的高优先级。例如，Promise 回调总是在 setTimeout 回调之前执行，即使 setTimeout 的延迟设置为 0。
示例：宏任务与微任务的执行顺序
以下是一个更复杂的示例，展示宏任务和微任务的交互：
javascript
console.log('Script Start');
setTimeout(() => console.log('setTimeout 1'), 0);
setTimeout(() => {
console.log('setTimeout 2');
Promise.resolve().then(() => console.log('Promise inside setTimeout'));
}, 0);
Promise.resolve()
.then(() => console.log('Promise 1'))
.then(() => console.log('Promise 2'));
queueMicrotask(() => console.log('queueMicrotask'));
console.log('Script End');输出结果为：
javascript
Script Start
Script End
Promise 1
Promise 2
queueMicrotask
setTimeout 1
setTimeout 2
Promise inside setTimeout解释：
- 同步代码执行，打印 'Script Start' 和 'Script End'。
- setTimeout 1 和 setTimeout 2 的回调被加入宏任务队列。
- Promise.resolve().then 和 queueMicrotask 的回调被加入微任务队列。
- 当前宏任务（脚本执行）完成后，微任务队列按顺序执行，打印 'Promise 1'、'Promise 2' 和 'queueMicrotask'。
- 微任务队列清空后，事件循环处理下一个宏任务，打印 'setTimeout 1'。
- 再处理下一个宏任务，打印 'setTimeout 2'，并将 Promise inside setTimeout 加入微任务队列。
- 清空微任务队列，打印 'Promise inside setTimeout'。
为什么需要微任务？
微任务的设计目的是为了处理需要在当前任务后立即执行的操作，尤其是在渲染或新事件处理之前。例如：
- 状态更新：Promise 回调用于处理异步操作的结果，确保状态在渲染前一致。
- DOM 变化：MutationObserver 允许开发者在 DOM 更新后立即响应，避免延迟。
- 性能优化：queueMicrotask 可用于将非紧急任务推迟到当前宏任务后执行，避免阻塞主线程。
相比之下，宏任务适合处理延迟执行或依赖外部资源（如网络或用户输入）的操作。例如，setTimeout 可用于安排非紧急任务，而 requestAnimationFrame 适合与渲染同步的动画任务。
实际应用与注意事项
理解宏任务和微任务的区别对编写高效代码至关重要。以下是一些实际应用场景和注意事项：
- 避免微任务过多：如果微任务队列持续添加新任务，可能导致事件循环无法处理宏任务或渲染，造成浏览器无响应。例如，递归调用 queueMicrotask 可能阻塞 UI 更新。
- 优先级管理：使用微任务确保关键状态更新优先于非紧急任务。例如，在处理用户输入后，使用 Promise 确保数据更新在渲染前完成。
- 性能优化：在浏览器中，事件循环需要在 16ms 内完成任务以保持 60 帧每秒的流畅渲染。合理分配宏任务和微任务可以避免性能瓶颈。
总结
宏任务和微任务是 JavaScript 事件循环的核心组成部分。宏任务处理较大的异步操作，如定时器和 I/O 事件，而微任务处理高优先级的状态更新，如 Promise 回调。事件循环通过优先执行微任务确保应用程序状态在渲染前保持一致。开发者通过合理使用宏任务和微任务，可以优化代码性能，避免阻塞，并提升用户体验。希望本文的讲解和示例能帮助你更好地掌握 JavaScript 的异步编程！