微任务是事件循环中宏任务结束后、下一轮宏任务开始前执行的高优先级异步任务,用于dom更新、框架响应式刷新、链式流程交接及异常后清理。

微任务不是“插队者”,而是异步流水线中承上启下的关键衔接层。它不替代宏任务,也不延迟执行,而是在每次宏任务结束、浏览器渲染前这个精确窗口里集中执行,确保逻辑连贯、状态一致、界面响应及时。
微任务落在事件循环的哪个位置
它严格位于“当前宏任务执行完毕后、下一轮宏任务开始前”之间。这个时机不可替代:既避开了同步代码阻塞,又赶在页面重绘之前,是唯一能兼顾 DOM 更新与响应式框架刷新的调度点。
- 一个 script 标签整体算作宏任务,执行完立即清空所有已入队的微任务
- setTimeout 回调是宏任务,其内部 Promise.then 就会生成新的微任务,在该 setTimeout 执行完后立刻运行
- requestAnimationFrame 属于宏任务,它的回调执行完,也会触发微任务清空
为什么微任务适合做流水线交接
因为它的执行具有原子性、确定性和高优先级——同一轮微任务队列中的任务按顺序全部跑完,中间不会被任何其他宏任务(如用户点击、定时器、IO)打断。
- 链式流程如 login → fetchProfile → renderMenu,用 await 自动把每步收尾包装进微任务,整个链条连续推进
- 手动交接时,queueMicrotask(() => doNext()) 比 Promise.resolve().then() 更轻量,语义更直白
- 避免用 setTimeout(() => {}, 0),它降级为宏任务,可能跨帧,导致 UI 反馈滞后
微任务与 UI 更新的配合时机
当同步代码修改了 DOM 或响应式数据,但浏览器还没开始重绘,这时正是微任务发力的时候。
- MutationObserver 回调本身就是微任务,适合监听结构变化
- 后续需计算布局、更新索引或触发 patch,应紧接 queueMicrotask,而不是 requestAnimationFrame(后者已进入渲染阶段)
- React 的 useEffect 或 Vue 的 onUpdated 中若需“DOM 已改、尚未渲染”,必须主动用微任务封装逻辑
错误处理与清理的可靠落点
微任务是异常捕获后执行清理或上报的黄金时机——它保证在当前上下文彻底退出前完成,且不被后续宏任务干扰。
- Promise.catch 后接 .then(() => cleanup()),cleanup 就在微任务中执行
- 资源释放、状态回滚、埋点上报等非核心但需确定执行的操作,放微任务比放 setTimeout 更稳妥
- 避免在 catch 块里直接写同步清理逻辑,若清理本身耗时,仍会阻塞主线程;应 queueMicrotask 包裹











