JS 中宏任务与微任务防坑指南怎么编写与总结-js教程-PHP中文网

宏任务和微任务是事件循环中真实调度的两个队列：宏任务由宿主环境推入（如settimeout、dom事件、i/o），微任务由js引擎内部触发（如promise.then、queuemicrotask）；执行顺序为“执行一个宏任务→立即清空全部微任务→再取下一个宏任务”。

js 中宏任务与微任务防坑指南怎么编写与总结

宏任务和微任务不是语法关键词，而是事件循环中真实调度的两个队列。写错顺序不报错，但状态更新延迟、UI渲染异常、接口竞态、动画卡顿这些“玄学问题”，十有八九就出在这里。

不用死记，记住两条主线：

宏任务：由浏览器或 Node.js 环境“主动推入”的异步回调，通常涉及外部系统介入——定时器（setTimeout/setInterval）、I/O（fetch 回调、XMLHttpRequest）、DOM 事件（click、input）、UI 渲染、requestAnimationFrame、MessageChannel、Node.js 的 setImmediate
微任务：由 JS 引擎“内部触发”的响应型操作，特点是轻量、高优先、链式强——Promise.then/catch/finally、queueMicrotask、MutationObserver 回调；Node.js 中 process.nextTick 优先级更高，但仍是微任务范畴

关键提醒：async 函数本身是同步执行的（进入调用栈），await 后面的代码会被包装成微任务；new Promise 构造函数内的代码是同步执行的，只有 resolve() 被调用后，其 .then 才进微任务队列。

事件循环不是“先微后宏”，而是：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

这个“清空”机制解释了为什么连续三个 .then 会连着输出，而 setTimeout 总是被挤到最后；也说明为什么在微任务里反复 queueMicrotask 可能导致饥饿（主线程一直没机会处理宏任务），要小心递归滥用。

以下不是理论，是线上真出过问题的模式：

状态更新后 DOM 没刷新？ —— 你在微任务里改了 state，但没等浏览器渲染就直接读 offsetHeight。解决：把读取逻辑放到 setTimeout（下一轮宏任务）或 requestAnimationFrame（紧邻渲染前）
多个 fetch 并发，最后只拿到最后一个结果？ —— 每个 fetch 的 .then 是微任务，但你用同一个变量赋值，后到的覆盖前到的。解决：用 Promise.all 或给每个请求绑定独立作用域，避免竞态
组件卸载后还执行 setState 报错？ —— fetch.then(setState) 是微任务，请求返回时组件可能已销毁。解决：在微任务执行前加校验（如 React 的 useEffect 清理函数标记 isMounted），或改用 AbortController 主动中断
想让某段逻辑“等本轮所有异步结束再跑”，却用了 setTimeout(fn, 0)？ —— 它只是进了宏任务队列，前面可能还有别的宏任务（比如用户点击、滚动事件）。更稳写法：queueMicrotask(fn)，它会在当前宏任务结束后、任何新宏任务开始前执行

别只盯着代码顺序，打开浏览器 DevTools：

在关键位置加 console.log，配合 %c 样式区分：微任务打上 color: blue，宏任务用 color: red
Chrome 的 Performance 面板录制后，展开 Event Log，能看到每个 Timer Fired（宏任务）、PromiseResolve（微任务）的时间戳和嵌套关系
Node.js 环境可用 --trace-event-categories v8,devtools.timeline 输出事件日志，定位任务排队位置

真正理解它们，不是为了画事件循环图，而是让每一行异步代码都落在你预期的位置上。