微任务与宏任务执行顺序详解

本文深入解析了JavaScript中微任务与宏任务的执行机制，强调“每个宏任务结束后同步、一次性清空全部微任务”这一核心规则，并通过经典面试题（如Promise.then与setTimeout的输出顺序）揭示常见误区；文章厘清了Promise链、queueMicrotask、MutationObserver等微任务来源，对比了setTimeout、I/O、requestAnimationFrame等宏任务特性，还点明了Node.js与浏览器在process.nextTick、setImmediate等API上的关键差异，直击前端面试中高频失分点——只要错判一次任务入队或清空时机，答案即全盘错误。

JavaScript 中的微任务（microtask）和宏任务（macrotask）执行顺序，直接决定 Promise、setTimeout、queueMicrotask 等行为的输出结果。面试时只要写错一行执行顺序，基本就判负。

微任务队列在每次宏任务结束后立即清空

这是最核心规则：每个宏任务（如 JS 主线程脚本、setTimeout 回调、setInterval 回调、I/O 回调）执行完后，引擎会**同步、一次性清空当前所有微任务**，不会穿插新的宏任务。

常见错误是以为 Promise.then 会“等下一个事件循环”，其实它会在当前宏任务末尾立刻执行：

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

输出是 1 → 4 → 3 → 2，不是 1 → 4 → 2 → 3。因为 Promise.then 进入微任务队列，而 setTimeout 进入宏任务队列（下一轮）。

• Promise.then、Promise.catch、Promise.finally 的回调都是微任务
• queueMicrotask(callback) 明确插入微任务，优先级与 Promise 相同
• MutationObserver 回调也是微任务（但极少在面试题中出现）

宏任务的典型来源和相对优先级

不同宏任务类型进入任务队列的时机不同，但一旦进入，就按「先进先出」排队；它们之间没有嵌套优先级，只有「谁先被调度、谁先入队」的问题。

常见宏任务来源包括：

• setTimeout 和 setInterval（即使延时为 0，也一定在下一轮）
• setImmediate（仅 Node.js，且已废弃，面试中遇到需说明环境）
• I/O 回调（如 fs.readFile、网络请求完成回调）
• UI 渲染（浏览器中，渲染本身是宏任务的一部分，但不可直接调度）

注意：requestAnimationFrame 不是宏任务也不是微任务，它是独立的帧回调机制，优先级高于宏任务但低于微任务，且只在浏览器环境有效 —— 面试题若混入它，大概率是在考你是否混淆概念。

多个 Promise 链和嵌套 then 的执行节奏

每轮微任务清空是「深度优先」的：一个 then 回调里返回新 Promise，它的 then 会加入**同一轮微任务队列末尾**，继续执行，直到队列为空。

Promise.resolve().then(() => {
  console.log('a');
  Promise.resolve().then(() => console.log('b'));
});
Promise.resolve().then(() => console.log('c'));

输出是 a → c → b，不是 a → b → c。因为第一个 then 入队后，第二个 then 立即入队（都在第一轮微任务），而 Promise.resolve().then(() => console.log('c')) 是另一个顶层 then，也进第一轮，但排在前面那个之后；内部嵌套的 b 是在 a 执行时才创建并推入队列，所以排在 c 后面。

• 微任务队列是 FIFO，但「创建时机」决定入队顺序，不是「声明顺序」
• await 后的代码等价于写在 then 里，同样属于微任务
• 不要依赖多层 then 的嵌套顺序做业务逻辑，可读性差且易错

Node.js 和浏览器在微任务调度上的细微差别

绝大多数情况下行为一致，但有两个关键点必须知道：

• Node.js 11+ 之后，setTimeout(fn, 0) 和 setImmediate(fn) 的执行顺序不再固定，取决于调用时机（事件循环阶段），面试中若出现，应回答「取决于当前循环所处阶段，不保证顺序」
• 浏览器中，Promise 微任务总在 setTimeout 宏任务之前；Node.js 中也一样，这点无差异
• process.nextTick() 是 Node.js 特有，它比所有微任务还早 —— 在当前操作结束、下一次事件循环之前执行，面试题若出现，要明确它优先级最高

真正容易被忽略的是：微任务队列在「每个宏任务结束时」清空，而不是「每次遇到 await 或 then 就清空一次」。这个「单次清空」特性，是所有顺序问题的底层锚点。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《微任务与宏任务执行顺序详解》文章吧，也可关注golang学习网公众号了解相关技术文章。