微任务（Microtasks）与宏任务（Macrotasks）详解

微任务（Microtasks）与宏任务（Macrotasks）详解

在 JavaScript 的异步编程模型中，事件循环（Event Loop） 是核心机制，而 微任务 和 宏任务 是事件循环处理异步操作的两类任务。它们的执行顺序和优先级不同，直接影响代码的执行流程。

一、核心概念

1. 宏任务（Macrotasks）

   • 定义：宏任务表示需要较长时间执行的任务，每次事件循环中只执行一个宏任务，随后处理微任务队列。

     常见类型：

     • 定时器任务：setTimeout / setInterval
     • I/O 操作（如文件读取、网络请求）
     • UI 渲染（浏览器的重绘、回流）
     • requestAnimationFrame（浏览器）：用于执行动画效果的任务
     • script 标签内的同步代码（整体视为一个宏任务）
     • 主代码块
     • 用户交互事件

2. 微任务（Microtasks）

   • 定义：微任务是更轻量级的异步任务，在当前宏任务执行完毕后立即执行，且会在下一个宏任务开始前处理完毕。

     常见类型：

     • Promise回调函数：Promise对象的处理程序Promise.then() / Promise.catch() / Promise.finally()
     • MutationObserver（DOM 变化监听）
     • queueMicrotask()（显式添加微任务）
     • process.nextTick（Node.js 环境）

二、执行顺序规则

事件循环的执行顺序遵循以下原则：

1. 执行栈（Call Stack）：同步代码按顺序执行，遇到异步任务时将其放入对应队列。
2. 微任务优先：当前宏任务执行完毕后，立即清空微任务队列中的所有任务。
3. 宏任务轮转：微任务队列清空从宏任务队列中取出下一个任务执行。

示例代码：

console.log("Script Start"); // 宏任务（script 标签）

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

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

console.log("Script End"); // 宏任务

// 输出顺序：
// Script Start → Script End → Promise 1 → Promise 2 → setTimeout

三、设计意义

1. 微任务的高优先级
   • 微任务通常用于需要快速响应的操作（如 Promise 链式调用），确保异步任务在同步代码之后立即执行。
   • 例如，在 Vue 的响应式系统中，数据变更后会通过微任务批量更新 DOM，提升性能。
2. 宏任务的延迟执行
   • 宏任务适用于需要等待外部事件或避免阻塞主线程的场景（如定时器、I/O 操作）。

四、实际应用与注意事项

1. 避免阻塞主线程

   • 长时间运行的同步代码会阻塞微任务和宏任务的执行，导致页面卡顿。应将耗时操作拆分为微任务或宏任务。

2. 循环中的异步问题

   for (var i = 0; i < 3; i++) {
     setTimeout(() => console.log(i), 0); // 输出 3, 3, 3（宏任务共享同一个变量）
   }
   for (let j = 0; j < 3; j++) {
     setTimeout(() => console.log(j), 0); // 输出 0, 1, 2（块级作用域）
   }
   

3. Node.js 与浏览器的差异

   • Node.js 中的 process.nextTick 优先级高于微任务（如 Promise）。
   • 浏览器的 requestAnimationFrame 属于宏任务，而 MutationObserver 属于微任务。

五、总结

关键口诀：“微任务先于宏任务，同源任务按序执行”。理解这一机制能有效解决异步代码的执行顺序问题，优化性能并避免潜在 Bug。