掌握宏任务与微任务调度逻辑是控制异步节奏的关键：微任务在当前宏任务结束后立即全部执行，适合收尾同步；宏任务用于分片防卡顿；需避免微任务无限嵌套导致假死。
掌握宏任务与微任务的调度逻辑，是主动控制异步执行节奏的关键。它们不是被动等待的“后台线程”，而是可被精准编排的执行单元——关键在于理解“何时插入”和“谁先清空”。
用微任务实现同步后立即响应
微任务在当前宏任务结束后、下一个宏任务开始前全部执行完毕，适合做“收尾动作”或“状态同步”。比如避免 DOM 重复渲染、统一错误处理、或确保 Promise 链中各步骤严格串行。
- 用 Promise.resolve().then() 替代 setTimeout(() => {}, 0) 实现零延迟但更高优先级的延后执行
- 在 Vue/React 状态批量更新后，用 queueMicrotask 触发一次精确的 DOM 检查（比 requestAnimationFrame 更早）
- 封装一个 nextTick 工具函数：内部调用 queueMicrotask 或 process.nextTick（Node.js），确保回调在本轮同步逻辑结束后立刻运行
用宏任务分割长耗时操作，防止主线程卡死
浏览器每执行完一个宏任务，会尝试进行 UI 渲染；因此把大任务拆成多个宏任务，就能让页面保持响应。
- 对大量数据遍历或复杂计算，用 setTimeout(..., 0) 或 postMessage 将下一批处理推入新宏任务
- 替代递归深度遍历：每次处理一部分节点后，用 requestAnimationFrame（属于宏任务）交还控制权给渲染，再继续下一轮
- 注意：不要用 setInterval 做分片——它不保证前一次执行完才触发下一次，易造成积压；优先选 setTimeout 递归调用
混合调度实现精细时序控制
真实场景常需“微任务内触发宏任务”或“宏任务中注入微任务”，形成嵌套节奏。
- 在 Promise.then 中调用 setTimeout → 微任务里创建新宏任务，实现“本轮结束→下轮开始→再等定时器”三级延迟
- 在 setTimeout 回调里 new Promise().then(...) → 宏任务中产生微任务，确保该 Promise 回调一定在本次 setTimeout 执行完后立刻跑，而不是等到下一个宏任务
- 使用 MutationObserver（微任务）监听 DOM 变化，配合 requestAnimationFrame（宏任务）做动画帧对齐，兼顾响应性与视觉流畅
避开常见陷阱
看似可控的调度，容易因队列清空规则误判执行顺序。
- 微任务不会跨宏任务累积：上一个宏任务产生的微任务，不会留到下一个宏任务之后再执行——它们总在当轮末尾被清空
- setImmediate（Node.js）和 requestAnimationFrame（浏览器）不属于微任务，别和 Promise.then 混为一谈；前者优先级低于微任务但高于普通 setTimeout
- 不要在微任务中无限循环添加新微任务，否则事件循环无法进入下一个宏任务，页面假死（如 Promise.then(() => Promise.resolve().then(...))）
