当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript微任务和宏任务详解

JavaScript微任务和宏任务详解

2026-02-21 08:26:36 0浏览收藏

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

深入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 渲染（如果需要）
进入下一轮事件循环，取下一个宏任务

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

实际代码示例分析

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

console.log('script start'); setTimeout(() => { console.log('setTimeout'); }, 0); Promise.resolve().then(() => { console.log('Promise then'); }); console.log('script end');

输出结果是：

script start script end Promise then setTimeout

解释：

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

再看一个嵌套例子：

console.log(1); setTimeout(() => { console.log(2); Promise.resolve().then(() => { console.log(3); }); }, 0); Promise.resolve().then(() => { console.log(4); setTimeout(() => { console.log(5); }, 0); }); console.log(6);

输出为：

1 6 4 2 3 5

原因：

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

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

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

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

let count = 0; function recursiveMicrotask() { if (count > 5) return; count++; console.log('microtask', count); queueMicrotask(recursiveMicrotask); } recursiveMicrotask();

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

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

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