JavaScript通过事件循环处理异步操作，宏任务（如setTimeout、script整体代码）与微任务（如Promise.then、queueMicrotask）分属不同队列。每次事件循环先执行一个宏任务，随后清空所有当前微任务，微任务具有更高优先级。例如，同步代码执行后，微任务回调（如Promise.then）会在当前宏任务结束后立即执行，而setTimeout等宏任务需等待下一轮循环。嵌套场景中，宏任务产生的微任务会在该宏任务结束后立即执行，导致输出顺序可能不符合直觉。由于微任务持续占用主线程，递归调用queueMicrotask或Promise.then可能引发“微任务风暴”，阻塞UI渲染，影响性能。相比之下，setTimeout能让出执行权，允许页面更新。理解宏任务与微任务的执行顺序，有助于准确预测异步代码行为，避免逻辑错误，提升程序可靠性与性能。
JavaScript 是单线程语言，所有任务在一个主线程上执行。为了高效处理异步操作，比如定时器、DOM 事件、网络请求等，JavaScript 引入了事件循环（Event Loop）机制，而微任务（Microtasks）与宏任务（Macrotasks）是其中的核心概念。理解它们的执行顺序和区别，对掌握异步编程至关重要。
宏任务与微任务的基本概念
在 JavaScript 中，任务被分为两大类：宏任务和微任务。
宏任务包括：
- 整体 script 代码
- setTimeout 回调
- setInterval 回调
- I/O 操作
- UI 渲染
- postMessage
微任务包括：
立即学习“Java免费学习笔记（深入）”；
- 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 代码。
