JavaScript事件循环：宏任务与微任务详解

JavaScript事件循环的执行逻辑远比“先宏后微”更精妙——它由调用栈状态、任务队列动态调度及运行时环境（浏览器或Node.js）共同决定：宏任务（如setTimeout、I/O、script脚本）触发新循环，而微任务（如Promise回调、queueMicrotask、MutationObserver）则在每个宏任务结束后立即清空执行，甚至在UI渲染前抢占控制权；尤其值得注意的是，Node.js中的process.nextTick优先级更高，会插队于标准微任务之前。一段看似简单的代码就能暴露出1→6→3→4→2→5这样反直觉的输出顺序，揭示出同步代码、微任务队列与宏任务队列之间精密穿插的真实协作机制——理解这一点，是写出高性能、可预测异步代码的关键起点。

JavaScript 的事件循环不是“先执行宏任务、再清空微任务队列”这么简单；真实执行顺序取决于当前调用栈是否为空、任务队列是否有待处理任务，以及浏览器或 Node.js 运行时的具体实现细节。

宏任务（macrotask）有哪些常见来源

宏任务是事件循环每次迭代中最多执行一个的任务单元。它们触发新一轮循环，也决定了代码的宏观节奏。

• setTimeout 和 setInterval 回调（即使延迟为 0）
• setImmediate（仅 Node.js）
• I/O 回调（如 fs.readFile 完成后）
• UI 渲染（浏览器中，通常在一轮宏任务结束后尝试进行）
• postMessage、MessageChannel 消息事件
• 整个 script 脚本本身（初始执行上下文）

微任务（microtask）的插入与执行时机

微任务在每次宏任务执行完、且调用栈清空后立即执行，直到微任务队列为空。它不触发新循环，但会抢占渲染和下个宏任务。

• Promise.then/catch/finally 回调（包括 Promise.resolve().then()）
• MutationObserver 回调
• queueMicrotask 显式入队的函数
• async 函数隐式返回的 Promise 的后续处理（即 await 后的代码会被包装进微任务）

注意：process.nextTick（Node.js）优先级高于其他微任务，但它不属于标准微任务队列，而是在当前操作结束、进入事件循环前立即执行——这导致它甚至早于 Promise.then。

一个典型执行序列的实操验证

下面这段代码能清晰暴露宏任务与微任务的真实穿插关系：

console.log(1);

setTimeout(() => console.log(2), 0);

Promise.resolve().then(() => console.log(3));

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

console.log(6);

输出顺序是：1 → 6 → 3 → 4 → 2 → 5。原因如下：

• 同步代码 console.log(1) 和 console.log(6) 立即执行
• 两个 Promise.then 被推入微任务队列，宏任务结束后立即执行，输出 3 和 4
• setTimeout 的回调被推入宏任务队列，要等当前宏任务+所有微任务完成后，才在下一轮循环中执行，输出 2
• 嵌套的 setTimeout 在 4 输出后才注册，因此它的回调排在下一个宏任务位置，输出 5

容易被忽略的关键点

微任务不是“比宏任务快”，而是“在宏任务退出后、下一轮开始前强制清空”。这意味着：

• 大量 Promise.then 链或频繁 queueMicrotask 可能阻塞 UI 渲染（浏览器中微任务执行期间不渲染）
• Node.js 中 process.nextTick 会打断微任务队列，造成与浏览器不一致的行为
• await 后面的语句不是“立刻执行”，而是被封装进一个微任务——所以 await Promise.resolve() 后的代码，总在当前同步代码之后、下一个宏任务之前运行
• 没有“微任务循环”，只有“微任务队列清空”：一旦开始执行微任务，就必须全部跑完，中途不会插入新的宏任务

真正影响行为的不是任务“类型”本身，而是它们被推入哪个队列、以及当前事件循环阶段是否允许该队列执行。

终于介绍完啦！小伙伴们，这篇关于《JavaScript事件循环：宏任务与微任务详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！