JavaScript微任务和宏任务详解

JavaScript作为单线程语言，依赖事件循环机制协调异步任务，而宏任务（如setTimeout、script整体）与微任务（如Promise.then、queueMicrotask）的优先级差异和执行时序，直接决定了代码的实际运行顺序——每次宏任务执行完毕后，所有当前微任务会立即、连续执行完毕，再进入下一轮宏任务，这种“微任务清空机制”虽保障了响应一致性，却也潜藏性能风险：不当的递归微任务可能引发“微任务风暴”，阻塞UI渲染；深入理解二者分工与协作逻辑，不仅能精准预判看似混乱的异步输出，更是写出健壮、高效、可维护JavaScript代码的关键基石。

JavaScript 是单线程语言，所有任务在一个主线程上执行。为了高效处理异步操作，比如定时器、DOM 事件、网络请求等，JavaScript 引入了事件循环（Event Loop）机制，而微任务（Microtasks）与宏任务（Macrotasks）是其中的核心概念。理解它们的执行顺序和区别，对掌握异步编程至关重要。

宏任务与微任务的基本概念

在 JavaScript 中，任务被分为两大类：宏任务和微任务。

宏任务包括：

• 整体 script 代码
• setTimeout 回调
• setInterval 回调
• I/O 操作
• UI 渲染
• postMessage

微任务包括：

• Promise.then/catch/finally 回调
• MutationObserver 回调
• queueMicrotask()
• process.nextTick()（Node.js 环境）

每次事件循环迭代中，会先执行一个宏任务，然后清空当前所有的微任务队列。微任务具有更高的优先级，一旦有微任务进入队列，就会在当前宏任务结束后立即执行，直到微任务队列为空。

事件循环的执行流程

事件循环的工作方式可以概括为以下步骤：

• 从宏任务队列中取出一个任务执行
• 执行过程中遇到异步操作，将其回调注册到对应的微任务或宏任务队列
• 当前宏任务执行完毕后，立即检查微任务队列
• 执行所有当前存在的微任务（按先进先出顺序）
• 微任务清空后，进行 UI 渲染（如果需要）
• 进入下一轮事件循环，取下一个宏任务

这意味着：一个宏任务之后，一定会把所有当前可用的微任务全部执行完，才开始下一个宏任务。

实际代码示例分析

看一段经典代码来理解执行顺序：

输出结果是：

解释：

• “script start” 和 “script end” 是同步代码，属于初始宏任务
• setTimeout 回调被放入宏任务队列
• Promise.then 被放入微任务队列
• 初始宏任务执行完后，立即执行微任务：输出 “Promise then”
• 微任务清空后，进入下一轮事件循环，执行 setTimeout 的回调

再看一个嵌套例子：

输出为：

原因：

• 1 和 6 是同步输出
• 第一个 Promise.then 进入微任务，输出 4
• 微任务执行完，第一轮结束
• 第二轮宏任务执行 setTimeout 输出 2，同时注册新的微任务（输出 3）
• 该宏任务结束后，执行微任务输出 3
• 接着执行后续 setTimeout（输出 5）

微任务的高优先级影响性能

由于微任务会在每个宏任务结束后立即执行，如果不断产生新的微任务，可能会阻塞主线程，导致页面无法及时渲染。

例如递归使用 queueMicrotask 或 Promise.then，会造成“微任务风暴”：

这段代码会连续执行 6 次微任务，期间不会有任何 UI 更新或其他宏任务介入。相比之下，使用 setTimeout 实现递归则会让出执行权，允许浏览器渲染。

基本上就这些。掌握微任务与宏任务的区别，能帮助你预测代码执行顺序，避免异步逻辑中的陷阱，写出更可靠、高效的 JavaScript 代码。

以上就是《JavaScript微任务和宏任务详解》的详细内容，更多关于的资料请关注golang学习网公众号！