宏任务与微任务是JavaScript运行时天然的任务优先级机制，每次宏任务执行完必须清空全部微任务队列才能进入下一个宏任务；微任务优先级更高、批量同步执行，适合收尾动作，宏任务适合划分阶段性边界。

宏任务与微任务不是调度工具，而是 JavaScript 运行时天然的任务优先级机制。合理利用它们的执行时机差异，能自然实现逻辑解耦——把强依赖顺序的代码拆到不同阶段执行，避免同步阻塞、减少竞态、提升响应性。

用微任务延迟但不打断当前流程

当一段逻辑需要“等当前同步操作收尾再执行”，又不想扔进 setTimeout（引入额外宏任务延迟），微任务是最轻量的选择。

• Promise.then 或 queueMicrotask 包裹的回调，会在当前函数调用栈清空后、渲染前立即执行
• 适合做状态归一化、副作用清理、DOM 批量更新准备等“收尾动作”
• 例如：表单提交后重置 UI 状态，但要等所有校验、请求发起完毕再统一清空，而不是在每个步骤里手动 reset

用宏任务明确划分执行边界

宏任务天然带“隔代隔离”效果——它总在微任务队列清空后才开始，且自身执行期间不会被其他宏任务插入。这适合划分互不干扰的业务阶段。

• setTimeout(fn, 0) 或 requestIdleCallback 可将耗时或低优先级逻辑推到下一轮事件循环
• 避免长同步计算阻塞渲染，也防止多个组件初始化互相干扰
• 例如：一个页面有多个模块 init 函数，用 setTimeout 分散执行，就能避免某一个模块卡住整个首屏渲染

嵌套组合实现分层响应

微任务可嵌套微任务，宏任务内可注册微任务——这种嵌套不是 bug，而是可控的分层时机设计。

• 比如 API 请求成功后，先用微任务更新局部状态（快反馈），再用 setTimeout 延迟触发日志上报或缓存写入（不影响主流程）
• 又如 MutationObserver 回调是微任务，它触发后立刻执行的 Promise.then 仍是微任务，可保证 DOM 变更与后续响应原子性
• 关键点：不要跨层强依赖执行顺序；微任务链适合“连续小动作”，宏任务适合“阶段性大动作”

避开常见耦合陷阱

解耦失败往往不是因为没用对 API，而是误判了任务类型和时机语义。

• 别用 setTimeout(0) 模拟“立刻执行”——它实际是下一个宏任务，中间会穿插渲染、用户输入等，延迟不可控
• 别在微任务里做 DOM 强制重排（如 offsetHeight），因为微任务执行时未必已渲染，可能拿不到最新样式
• 多个异步操作之间若存在数据依赖，优先用 Promise 链而非混用 setTimeout + then，否则执行顺序易失控