微任务是事件循环中优先级最高、执行最及时的异步任务，包括promise回调等，在每轮宏任务后立即清空全部待处理微任务，不跨轮次延迟，但滥用会导致主线程饥饿和界面卡顿。
微任务（Microtask）是 JavaScript 事件循环中优先级最高、执行最及时的异步任务类型，包括 Promise.then/catch/finally、MutationObserver 回调等。它在每次宏任务（如 setTimeout、事件回调、渲染）结束后立即清空，不跨轮次延迟。合理利用微任务能显著提升关键交互响应速度，但滥用也会引发性能隐患。
明确微任务的执行时机与边界
理解“何时执行”是优化前提：
- 每轮事件循环只执行一个宏任务，完成后立即执行全部待处理微任务（队列清空）
- 微任务内产生的新微任务（如嵌套
Promise.resolve().then(...)）会加入本轮末尾，仍属同一轮清空范围 - 微任务不触发页面渲染，渲染（Layout/Paint）发生在微任务队列清空之后、下一轮宏任务开始之前
- 连续大量微任务（如未节流的
Promise链式调用）会导致主线程长时间无响应，阻塞用户输入和动画
避免微任务堆积导致的主线程饥饿
高频或递归式微任务会抢占主线程，使界面卡顿、交互失灵：
- 禁止在
Promise.then中无条件递归调用自身（如模拟轮询），改用setTimeout或requestIdleCallback - 对批量数据处理场景，使用
queueMicrotask+ 分片（chunking）控制单次处理量，例如每轮最多处理 100 条 - 警惕第三方库隐式创建微任务（如某些状态管理库的批量更新机制），可通过浏览器 DevTools 的 Performance 面板 → Event Log 追踪微任务数量与耗时
用对地方：优先调度用户感知强的关键操作
微任务适合调度需要“尽快执行但不打断当前渲染”的高优先级逻辑：
- 表单输入校验反馈（如实时提示格式错误），比
setTimeout(0)更快响应 - 组件状态同步后触发 DOM 更新检查（如 Vue 的 nextTick、React 的 flushSync 内部机制）
- 将非阻塞的数据预处理（如轻量 JSON 解析、字段映射）放入微任务，避免挤占后续渲染时间
- 注意：不要在微任务中执行耗时计算、大量 DOM 操作或网络请求——这些应移交 Web Worker 或降级为宏任务
监控与验证优化效果
真实性能提升需数据支撑：
- 使用
performance.mark()和performance.measure()标记微任务入口与完成点，统计平均延迟 - 在 Chrome DevTools 的 Performance → Bottom-up 视图中筛选
microtask，观察其总耗时占比是否超过 5% - 对比优化前后 TTI（Time to Interactive） 和 FID（First Input Delay） 指标变化，确认用户交互响应确实改善
