queueMicrotask 是浏览器和 Node.js 环境中提供的一个 API,用于将任务排入微任务队列(microtask queue),在当前执行栈清空后、浏览器渲染之前执行。
✅ 基本用法
queueMicrotask(() => {
console.log("微任务执行了");
});
console.log("同步任务");
输出顺序:
同步任务
微任务执行了
🔍 微任务 vs 宏任务
| 类型 | 示例 API | 执行时机 |
|---|---|---|
| 微任务 | queueMicrotask, Promise.then | 当前任务结束后立即执行 |
| 宏任务 | setTimeout, setInterval | 下一个事件循环周期执行 |
🧠 使用场景
- 想在 当前 JavaScript 执行上下文结束后尽快执行某些逻辑,但又 不想阻塞主线程。
- 替代
Promise.resolve().then(...)的更语义化方式。
⚠️ 注意事项
- 微任务会阻塞渲染,所以不要在里面做重计算。
- 如果在微任务中继续添加微任务,可能会导致浏览器卡顿(因为渲染被推迟)。
✅ 兼容性
- 浏览器:Chrome 71+, Firefox 69+, Safari 14+, Edge 79+
- Node.js:v11.0.0+
✅ 示例:与 Promise 对比
Promise.resolve().then(() => console.log("Promise 微任务"));
queueMicrotask(() => console.log("queueMicrotask 微任务"));
输出顺序(两者都是微任务,按顺序执行):
Promise 微任务
queueMicrotask 微任务