当前位置：首页 > news >正文

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

news 来源：原创 2025/4/23 5:45:24

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

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

文章目录

- 微任务（Microtasks）与宏任务（Macrotasks）详解
- - - **一、核心概念**
    - **二、执行顺序规则**
    - **三、设计意义**
    - **四、实际应用与注意事项**
    - **五、总结**

一、核心概念

宏任务（Macrotasks）
- 定义：宏任务表示需要较长时间执行的任务，每次事件循环中只执行一个宏任务，随后处理微任务队列。
  
  常见类型：
  - 定时器任务：setTimeout / setInterval
  - I/O 操作（如文件读取、网络请求）
  - UI 渲染（浏览器的重绘、回流）
  - requestAnimationFrame（浏览器）：用于执行动画效果的任务
  - script 标签内的同步代码（整体视为一个宏任务）
  - 主代码块
  - 用户交互事件
微任务（Microtasks）
- 定义：微任务是更轻量级的异步任务，在当前宏任务执行完毕后立即执行，且会在下一个宏任务开始前处理完毕。
  
  常见类型：
  - Promise回调函数：Promise对象的处理程序Promise.then() / Promise.catch() / Promise.finally()
  - MutationObserver（DOM 变化监听）
  - queueMicrotask()（显式添加微任务）
  - process.nextTick（Node.js 环境）

二、执行顺序规则

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

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

示例代码：

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

三、设计意义

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

四、实际应用与注意事项

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

循环中的异步问题

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（块级作用域）
}

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

五、总结

特性	微任务（Microtasks）	宏任务（Macrotasks）
执行时机	当前宏任务结束后立即执行	下一个事件循环开始时执行
优先级	高于宏任务	低于微任务
典型场景	Promise 回调、MutationObserver	setTimeout、I/O 操作、UI 渲染
队列清空规则	必须全部执行完毕	每次事件循环只执行一个