queuemicrotask 是浏览器原生微任务api，将函数推入微任务队列末尾执行；相比 promise.then，它更轻量、无promise状态开销、不触发 unhandledrejection，语义更清晰。
queueMicrotask 是什么，和 Promise.then 有什么区别
queueMicrotask 是浏览器原生提供的微任务调度 API，作用是把一个函数推入当前事件循环的微任务队列末尾，在本轮宏任务结束后、下一轮宏任务开始前执行。它和 Promise.resolve().then(fn) 效果一致，但更轻量、语义更清晰——不创建 Promise 实例，没有状态管理开销，也不触发 Promise 的异常捕获链。
- 不会像
Promise.then那样在抛错时触发未处理的 rejection（即不会触发unhandledrejection事件） - 没有
Promise构造函数的性能开销，尤其在高频调用场景（如渲染循环、输入节流）中更干净 - 所有现代浏览器（Chrome 71+、Firefox 70+、Safari 15.4+、Edge 79+）均已支持，Node.js 11.0+ 也支持
怎么正确使用 queueMicrotask 调度回调
直接传入一个无参函数即可，queueMicrotask 不接受参数，需自行闭包捕获上下文：
let data = { count: 1 };
queueMicrotask(() => {
console.log('微任务执行', data.count); // ✅ 正确：闭包引用
});
<p>// ❌ 错误写法（会立即执行并返回结果）
queueMicrotask(doSomething());</p><p>// ❌ 错误写法（this 绑定丢失，且无法传参）
queueMicrotask(obj.method);</p>
如果需要传参或绑定 this，用箭头函数或 bind 包一层：
queueMicrotask(() => fn(a, b))queueMicrotask(fn.bind(obj, a, b))
注意：不要在 queueMicrotask 回调里做耗时操作（如大量 DOM 遍历、JSON.parse 大字符串），它仍属于“本轮结束前必须完成”的微任务，阻塞后续微任务和 UI 渲染。
哪些场景适合用 queueMicrotask，哪些不适合
适合的场景：
- 在 DOM 更新后读取布局（例如刚插入元素后立刻调用
getBoundingClientRect()），避免强制同步布局（layout thrashing） - 将副作用（如日志、埋点）从关键渲染路径中移出，但又比
setTimeout(..., 0)更及时 - 实现轻量级的“next tick”逻辑，替代自定义 Promise 微任务封装
不适合的场景：
- 需要跨事件循环延迟（比如等用户交互后再响应）→ 应该用
setTimeout或事件监听 - 希望任务能被取消 →
queueMicrotask不提供取消机制，得自己加标记位或改用AbortController配合其他方案 - 服务端环境（某些 Node 版本或运行时）→ 检查
typeof queueMicrotask === 'function'再降级
常见错误：DOM 变更后没拿到最新值？检查执行时机是否真在 microtask
典型问题：插入节点后立即用 queueMicrotask 读取 offsetHeight，却还是 0。
原因往往不是 queueMicrotask 失效，而是：
- 元素尚未被添加到文档流（比如只创建了
document.createElement，但没appendChild） - 样式为
display: none或父容器不可见，导致尺寸计算为 0 - 使用了
visibility: hidden（仍占布局空间，但offsetHeight正常；而display: none则为 0）
验证方式：在 queueMicrotask 回调里加 console.log(element.offsetParent, getComputedStyle(element).display)，确认元素已挂载且样式允许布局计算。
微任务本身很可靠，但它的“延后”是相对于 JS 执行栈而言的，不是相对于渲染帧——如果 DOM 变更触发了重排/重绘，浏览器可能还没完成样式计算，这时读尺寸仍不准。真正保险的做法是组合使用：queueMicrotask + requestAnimationFrame（后者保证在下一帧绘制前执行）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
