JavaScript中宏任务和微任务有哪些

# JavaScript中宏任务和微任务有哪些

## 前言

在JavaScript的异步编程模型中，理解**宏任务（MacroTask）**和**微任务（MicroTask）**的执行机制至关重要。本文将深入探讨它们的分类、执行顺序以及实际应用场景，帮助开发者掌握事件循环的核心原理。

---

## 一、什么是宏任务和微任务？

### 1. 基本概念
- **宏任务**：由浏览器或Node.js环境调度的任务，例如`setTimeout`、`setInterval`等。
- **微任务**：在当前任务执行结束后立即执行的任务，例如`Promise.then()`、`MutationObserver`。

### 2. 事件循环中的执行顺序
JavaScript引擎遵循以下流程：
1. 执行一个宏任务（如脚本整体）
2. 执行所有微任务
3. 渲染页面（如有需要）
4. 开始下一个宏任务

---

## 二、宏任务的主要类型

### 1. 定时器类
- **`setTimeout` / `setInterval`**  
  延迟执行或周期性执行的代码，属于典型的宏任务。
  ```javascript
  setTimeout(() => console.log('Timeout 1'), 0);

2. I/O操作

• 文件读写（Node.js）
  如fs.readFile的回调函数。
• 网络请求
  XMLHttpRequest或fetch的回调（注意：fetch的then属于微任务）。

3. UI渲染

• requestAnimationFrame
  下一次重绘前执行，常用于动画。

4. 其他

• setImmediate（Node.js特有）
  比setTimeout(fn, 0)更优先。
• 事件监听回调
  如click、scroll等DOM事件。

---

三、微任务的主要类型

1. Promise相关

• Promise.then() / Promise.catch() / Promise.finally()
  异步操作完成后的回调。

  
  Promise.resolve().then(() => console.log('Promise 1'));
  

2. MutationObserver

• 监听DOM变化的回调：

  
  new MutationObserver(() => console.log('DOM changed')).observe(...);
  

3. 其他API

• queueMicrotask
  显式添加微任务：

  
  queueMicrotask(() => console.log('Microtask'));
  

---

四、执行顺序的经典案例

示例代码分析

console.log('Script start');

setTimeout(() => console.log('setTimeout'), 0);

Promise.resolve()
  .then(() => console.log('Promise 1'))
  .then(() => console.log('Promise 2'));

console.log('Script end');

输出结果

1. Script start
2. Script end
3. Promise 1
4. Promise 2
5. setTimeout

执行流程解析

1. 同步代码（宏任务）首先执行。
2. 微任务队列中的Promise.then()按顺序执行。
3. 最后执行宏任务队列中的setTimeout。

---

五、常见面试题剖析

问题1：以下代码的输出顺序是什么？

setTimeout(() => console.log(1), 0);

Promise.resolve()
  .then(() => console.log(2))
  .then(() => console.log(3));

console.log(4);

答案：4 → 2 → 3 → 1

问题2：如何让代码在DOM更新后执行？

button.addEventListener('click', () => {
  Promise.resolve().then(() => console.log('Microtask'));
  setTimeout(() => console.log('Macrotask'));
});

点击后输出顺序为：Microtask → Macrotask。

---

六、实际应用场景

1. 性能优化

• 将高优先级任务放入微任务队列（如数据更新），避免被宏任务阻塞。

2. 框架中的运用

• Vue的nextTick优先使用微任务实现DOM更新后的回调。

3. 避免UI卡顿

• 长任务分解为多个微任务，通过queueMicrotask分批执行。

---

七、Node.js中的差异

1. process.nextTick vs setImmediate

• process.nextTick：微任务，优先级最高。
• setImmediate：宏任务，在事件循环的检查阶段执行。

2. 阶段对比

Node.js事件循环分为6个阶段，宏任务分布在不同的阶段（如poll、check）。

---

总结

类型	常见API	执行时机
宏任务	setTimeout, setInterval, I/O	下一次事件循环
微任务	Promise.then, queueMicrotask	当前任务结束后立即执行

理解两者的区别和协作机制，能够帮助开发者编写更高效、可预测的异步代码。

---

扩展阅读

• MDN事件循环文档
• Node.js事件循环详解

”`

注：实际字数可能因格式略有差异，建议通过Markdown工具查看完整统计。