queueMicrotask

74 阅读1分钟

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 微任务