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

js中的微任务和宏任务的理解

news 2025/7/19 21:34:50

在JavaScript中，微任务（Microtask）和宏任务（Macrotask）是异步任务执行机制的重要组成部分，它们共同构成了JavaScript事件循环（Event Loop）的核心逻辑。理解这两个概念对于编写高性能、无阻塞的代码至关重要。

1. 基本概念

宏任务（Macrotask）

定义：由浏览器或Node.js环境提供的异步任务，通常是一些离散的、独立的操作。
常见宏任务：
- setTimeout、setInterval
- setImmediate（Node.js）
- requestAnimationFrame（浏览器）
- I/O操作（如文件读取、网络请求）
- UI渲染（浏览器）

微任务（Microtask）

定义：JavaScript引擎自身提供的异步任务，通常是需要在当前任务完成后立即执行的操作。
常见微任务：
- Promise.then()、Promise.catch()、Promise.finally()
- MutationObserver（浏览器）
- process.nextTick（Node.js）
- queueMicrotask（ES2020+）

2. 执行顺序规则

JavaScript的事件循环执行机制遵循以下规则：

执行栈（Call Stack） 为空时，事件循环开始处理任务队列。
宏任务队列 每次只取一个任务执行，执行完毕后立即处理 微任务队列。
微任务队列 会被清空（依次执行所有微任务），直到队列为空。
微任务队列清空后：
- 浏览器可能进行 UI渲染（仅在浏览器环境）。
- 事件循环回到步骤2，继续处理下一个宏任务。

总结：宏任务 → 清空微任务队列 → UI渲染 → 下一个宏任务

3. 经典示例分析

console.log('1. 主线程开始');// 宏任务1
setTimeout(() => {console.log('2. setTimeout 回调执行');// 微任务1Promise.resolve().then(() => {console.log('3. setTimeout 内部 Promise 微任务执行');});
}, 0);// 微任务2
Promise.resolve().then(() => {console.log('4. 主线程 Promise 微任务执行');// 微任务3queueMicrotask(() => {console.log('5. queueMicrotask 微任务执行');});
});console.log('6. 主线程结束');

执行顺序解析：

主线程 执行：
- 输出 1. 主线程开始
- setTimeout 被放入 宏任务队列。
- Promise.then 被放入 微任务队列（微任务2）。
- 输出 6. 主线程结束。
微任务队列 执行：
- 执行微任务2，输出 4. 主线程 Promise 微任务执行。
- queueMicrotask 被加入微任务队列（微任务3）。
- 继续执行微任务3，输出 5. queueMicrotask 微任务执行。
宏任务队列 执行：
- 执行宏任务1（setTimeout 回调），输出 2. setTimeout 回调执行。
- Promise.then 被加入微任务队列（微任务1）。
- 清空微任务队列，执行微任务1，输出 3. setTimeout 内部 Promise 微任务执行。

最终输出顺序：

1. 主线程开始
6. 主线程结束
4. 主线程 Promise 微任务执行
5. queueMicrotask 微任务执行
2. setTimeout 回调执行
3. setTimeout 内部 Promise 微任务执行

4. 实际应用场景

4.1 微任务的应用

Promise链式调用：确保回调按顺序执行，不阻塞主线程。
```
fetchData().then(processData).then(updateUI).catch(handleError);
```
DOM变更后立即操作：使用 MutationObserver 监听DOM变化后执行回调。

4.2 宏任务的应用

定时器：实现延迟执行或周期性任务。

setTimeout(() => {// 延迟执行的代码
}, 1000);

分批处理大量数据：避免长时间阻塞主线程。

function processLargeData(data) {const batchSize = 1000;let index = 0;function processBatch() {const batch = data.slice(index, index + batchSize);// 处理当前批次数据index += batchSize;if (index < data.length) {setTimeout(processBatch, 0); // 使用宏任务拆分处理}}processBatch();
}

5. 微任务 vs 宏任务的关键区别

特性	微任务（Microtask）	宏任务（Macrotask）
执行时机	当前任务结束后立即执行（在渲染前）	下一次事件循环开始时执行（可能在渲染后）
队列清空规则	一次性清空所有微任务	每次只处理一个宏任务
触发频率	高（可能在一次事件循环中多次触发）	低（每次事件循环只处理一个）
典型场景	Promise回调、DOM变更监听	定时器、I/O操作、UI渲染