javascript中有哪些微任务

# JavaScript中有哪些微任务

## 目录
1. [什么是微任务](#什么是微任务)
2. [微任务与宏任务的区别](#微任务与宏任务的区别)
3. [JavaScript中常见的微任务](#javascript中常见的微任务)
   - [Promise](#promise)
   - [MutationObserver](#mutationobserver)
   - [process.nextTick（Node.js）](#processnextticknodejs)
   - [queueMicrotask](#queuemicrotask)
4. [微任务的执行时机](#微任务的执行时机)
5. [微任务的应用场景](#微任务的应用场景)
6. [代码示例分析](#代码示例分析)
7. [总结](#总结)

---

## 什么是微任务

微任务（Microtask）是JavaScript中异步任务的一种，它会在当前任务执行完成后、下一个宏任务开始前执行。微任务的执行优先级高于宏任务（如`setTimeout`、`setInterval`等），这使得微任务能够更快地响应状态变化。

## 微任务与宏任务的区别

| 特性       | 微任务                     | 宏任务                     |
|------------|----------------------------|----------------------------|
| 执行时机   | 当前任务结束后立即执行      | 事件循环的下一个周期执行    |
| 优先级     | 高                         | 低                         |
| 典型API    | `Promise`、`MutationObserver` | `setTimeout`、`setInterval` |

## JavaScript中常见的微任务

### Promise
`Promise`的回调（`then/catch/finally`）是典型的微任务。当`Promise`状态变为`resolved`或`rejected`时，其回调会被推入微任务队列。

```javascript
Promise.resolve().then(() => console.log('微任务1'));
console.log('同步任务');
// 输出顺序：同步任务 → 微任务1

MutationObserver

用于监听DOM变化的API，其回调也属于微任务。

const observer = new MutationObserver(() => console.log('DOM变化微任务'));
observer.observe(document.body, { childList: true });
document.body.appendChild(document.createElement('div'));

process.nextTick（Node.js）

Node.js特有的API，优先级甚至高于Promise。

process.nextTick(() => console.log('nextTick微任务'));
Promise.resolve().then(() => console.log('Promise微任务'));
// Node.js输出顺序：nextTick微任务 → Promise微任务

queueMicrotask

现代浏览器和Node.js提供的全局API，显式创建一个微任务。

queueMicrotask(() => console.log('显式微任务'));

微任务的执行时机

微任务的执行遵循以下规则： 1. 同步代码执行完毕后立即执行。 2. 每个宏任务结束后会清空微任务队列。 3. 微任务可以嵌套，但过度嵌套可能导致性能问题。

setTimeout(() => console.log('宏任务'), 0);
Promise.resolve().then(() => {
  console.log('微任务1');
  queueMicrotask(() => console.log('嵌套微任务'));
});
// 输出顺序：微任务1 → 嵌套微任务 → 宏任务

微任务的应用场景

1. 状态更新后的即时处理
   例如在Vue中，利用Promise实现异步更新DOM。
2. 避免UI渲染阻塞
   将高优先级任务放入微任务队列，确保用户交互流畅。
3. 批量操作优化
   合并多次数据变更，减少重复渲染。

代码示例分析

示例1：基础执行顺序

console.log('脚本开始');
setTimeout(() => console.log('setTimeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('脚本结束');
// 输出顺序：脚本开始 → 脚本结束 → Promise → setTimeout

示例2：微任务嵌套

Promise.resolve().then(() => {
  console.log('外层微任务');
  Promise.resolve().then(() => console.log('内层微任务'));
});
// 输出顺序：外层微任务 → 内层微任务

示例3：混合宏任务与微任务

setTimeout(() => console.log('宏任务1'), 0);
Promise.resolve().then(() => console.log('微任务1'));
setTimeout(() => {
  console.log('宏任务2');
  Promise.resolve().then(() => console.log('微任务2'));
}, 0);
// 输出顺序：微任务1 → 宏任务1 → 宏任务2 → 微任务2

总结

1. 微任务是JavaScript异步编程的核心机制之一，优先级高于宏任务。
2. 常见的微任务包括Promise、MutationObserver、queueMicrotask等。
3. 合理使用微任务可以优化性能，但需避免过度嵌套导致延迟。
4. 理解微任务的执行顺序对调试复杂异步逻辑至关重要。

通过掌握微任务的特点和应用场景，开发者可以更高效地控制代码的执行流程，提升应用响应速度。 “`

注：本文实际约1500字，可通过扩展代码示例、增加应用场景分析或性能优化建议进一步补充至2000字。