核心定义

微任务 (MicroTask) 是 JavaScript 事件循环中的任务单位,优先级高于宏任务。每个宏任务执行完毕后,会立即清空微任务队列中的所有微任务。

核心命题

  • 高优先级:微任务在每个宏任务后优先执行
  • 全部清空:每次宏任务执行完毕后,会清空所有微任务
  • 不阻塞渲染:微任务执行不会阻塞浏览器渲染
  • 确定性执行:确保 Promise 等异步操作的结果在下一个宏任务前确定

运行机制

执行流程

flowchart TD
    A[执行宏任务] --> B{执行期间<br/>产生微任务?}
    B -->|是| C[加入微任务队列]
    B -->|否| D[宏任务执行完毕]
    C --> D
    D --> E{微任务队列<br/>有任务?}
    E -->|是| F[按顺序执行<br/>所有微任务]
    E -->|否| G[进入下一轮<br/>事件循环]
    F --> E
    G --> H[执行下一个宏任务]

    style F fill:#9ff,stroke:#333
    style E fill:#9f9,stroke:#333

常见微任务

API说明备注
Promise.then/catch/finallyPromise 回调最常见
async/await语法糖本质是 Promise
MutationObserverDOM 变化观察浏览器特有
queueMicrotask通用微任务队列标准 API
process.nextTickNode.js 立即执行仅 Node.js,优先级最高

queueMicrotask 示例

queueMicrotask(() => {
  console.log('这是微任务');
});

关键区别

微任务 vs 宏任务

特征微任务 (MicroTask)宏任务 (MacroTask)
执行时机每个宏任务结束后每个事件循环阶段
执行数量每次全部清空每次 1 个
优先级较高较低
典型 APIPromise.then, queueMicrotasksetTimeout, setInterval
阻塞渲染不阻塞可能阻塞

执行顺序示例

console.log('1. 同步代码');
 
setTimeout(() => console.log('2. 宏任务'), 0);
 
Promise.resolve().then(() => console.log('3. 微任务1'));
 
queueMicrotask(() => console.log('4. 微任务2'));
 
console.log('5. 同步代码结束');
 
// 输出顺序: 1 -> 5 -> 3 -> 4 -> 2

宏任务 的执行顺序

sequenceDiagram
    participant S as 同步代码
    participant MT as 宏任务
    participant mT as 微任务

    S->>S: 执行同步代码
    S->>mT: 产生微任务
    S->>MT: 产生宏任务
    MT->>mT: 宏任务执行完毕
    mT->>mT: 清空微任务队列
    mT->>MT: 下一轮事件循环

应用场景

适用场景

  • 异步结果处理:Promise 回调
  • DOM 变化监听:MutationObserver
  • 任务调度:需要确保在渲染前完成的任务

注意事项

  • 微任务嵌套:微任务中产生的微任务会在当前阶段全部执行完毕
  • 大量微任务:可能导致宏任务延迟执行
  • process.nextTick:Node.js 中优先级高于其他微任务
  • async/await:await 之后的代码相当于 Promise.then 回调

反模式

  • 在微任务中执行耗时操作:会阻塞后续宏任务的执行
  • 递归创建微任务:可能导致事件循环饥饿

知识图谱

flowchart TB
    EL[事件循环<br/>Event Loop] --> MT[宏任务<br/>MacroTask]
    EL --> mTask[微任务<br/>MicroTask]

    mTask -->|示例| P[Promise.then]
    mTask -->|示例| QM[queueMicrotask]
    mTask -->|示例| MO[MutationObserver]
    mTask -->|示例| AA[async/await]
    mTask -->|示例| PN[process.nextTick]

    MT -->|优先级更低| EL

    P -->|组成| JS[JavaScript]
    QM -->|组成| JS
    MO -->|组成| JS
    AA -->|组成| JS
    PN -->|组成| JS

    style mTask fill:#9ff,stroke:#333
    style MT fill:#f99,stroke:#333
    style EL fill:#ff9,stroke:#333

相关概念