在前端开发中，**宏使命（Macro Task）**和**微使命（Micro Task）**是 JavaScript 事件循环（Event Loop）中的两个重要概念。它们决定了异步代码的实行次序。
---
### 1. **事件循环（Event Loop）**
JavaScript 是单线程的，通过事件循环机制处理异步使命。事件循环的核心是：
- **主线程**：实行同步代码。
- **使命队列**：存放异步使命的回调函数。
- **事件循环**：不断检查使命队列，将使命推入主线程实行。
使命队列分为两种：
- **宏使命队列**：存放宏使命。
- **微使命队列**：存放微使命。
---
### 2. **宏使命（Macro Task）**
宏使命是指需要较长时间实行的使命，通常包括：
- `setTimeout` 和 `setInterval` 的回调。
- `setImmediate`（Node.js 特有）。
- `requestAnimationFrame`（浏览器特有）。
- I/O 操纵（如文件读写、网络哀求）。
- UI 渲染（浏览器特有）。
**实行时机**：每次事件循环中，主线程会实行一个宏使命，然后检查微使命队列。
---
### 3. **微使命（Micro Task）**
微使命是指需要尽快实行的使命，通常包括：
- `Promise` 的回调（`then`、`catch`、`finally`）。
- `MutationObserver`（监听 DOM 变革）。
- `process.nextTick`（Node.js 特有）。
**实行时机**：每次宏使命实行完毕后，事件循环会清空微使命队列中的全部使命，然后再实行下一个宏使命。
---
### 4. **实行次序**
事件循环的实行次序如下：
1. 实行主线程的同步代码。
2. 实行当前宏使命。
3. 清空微使命队列中的全部使命。
4. 实行 UI 渲染（浏览器）。
5. 实行下一个宏使命。
---
### 5. **代码示例**
```javascript
console.log('1. 同步代码'); // 同步代码，立即实行
setTimeout(() => {
console.log('4. 宏使命 - setTimeout'); // 宏使命
}, 0);
Promise.resolve().then(() => {
console.log('3. 微使命 - Promise'); // 微使命
});
console.log('2. 同步代码'); // 同步代码，立即实行
```
**输出结果**：
```
1. 同步代码
2. 同步代码
3. 微使命 - Promise
4. 宏使命 - setTimeout
```
**解释**：
1. 同步代码立即实行。
2. `Promise` 的微使命在同步代码之后、宏使命之前实行。
3. `setTimeout` 的宏使命在微使命之后实行。
---
### 6. **宏使命和微使命的区别**
| 特性 | 宏使命（Macro Task） | 微使命（Micro Task） |
|-----------------|------------------------------------|------------------------------------|
| **实行时机** | 每次事件循环实行一个宏使命 | 每次宏使命实行后清空微使命队列 |
| **常见使命** | `setTimeout`、`setInterval`、I/O | `Promise`、`MutationObserver` |
| **优先级** | 较低 | 较高 |
| **队列类型** | 宏使命队列 | 微使命队列 |
---
### 7. **现实应用**
- **优化性能**：将高优先级使命放入微使命队列，确保尽快实行。
- **制止壅闭**：将耗时使命放入宏使命队列，制止壅闭主线程。
- **控制实行次序**：通过微使命和宏使命的特性，控制异步代码的实行次序。
---
### 总结
- **宏使命**：需要较长时间实行的使命，如 `setTimeout`、I/O 操纵。
- **微使命**：需要尽快实行的使命，如 `Promise`、`MutationObserver`。
- **实行次序**：同步代码 → 微使命 → 宏使命 → UI 渲染 → 下一个宏使命。
理解宏使命和微使命的机制，有助于更好地掌握 JavaScript 的异步编程和事件循环。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
