为什么 Promise 比 setTimeout 先执行？——JavaScript 事件循环与异步顺序完全指南
这是 JavaScript 异步中最经典也最容易困惑的问题之一。核心答案是：
Promise 的回调属于 Microtask（微任务），setTimeout 属于 Macrotask（宏任务）。微任务队列会在当前宏任务执行完毕后、下一个宏任务开始前被清空。
1. JavaScript 事件循环（Event Loop）核心模型（2026 年最新标准）
JavaScript 是单线程语言，但通过事件循环实现了异步。
执行流程（极简版）：
- 执行同步代码（主线程）
- 执行完当前宏任务后，清空所有微任务（Microtask Queue）
- 执行下一个宏任务（Macrotask）
- 重复以上过程
两大任务队列对比
| 队列类型 | 名称 | 常见 API | 执行时机 | 优先级 |
|---|---|---|---|---|
| Macrotask | 宏任务 | setTimeout,setInterval,setImmediate, I/O, UI渲染, MessageChannel | 当前事件循环周期结束后 | 较低 |
| Microtask | 微任务 | Promise.then/catch/finally,queueMicrotask,MutationObserver,process.nextTick(Node) | 当前宏任务结束后、下一个宏任务前立即执行 | 最高 |
关键规则：
- 每次事件循环只会执行一个宏任务
- 但会执行所有微任务（直到队列为空）
- 微任务中新增的微任务也会在本次继续执行（可能导致微任务饥饿）
2. 经典示例解析
console.log('1');// 同步setTimeout(()=>{console.log('2');// 宏任务},0);Promise.resolve().then(()=>{console.log('3');// 微任务});console.log('4');// 同步输出顺序：
1 4 3 2执行过程：
- 同步代码执行 → 输出
1、4 - 当前宏任务结束 → 清空微任务队列 → 输出
3 - 进入下一个事件循环 → 执行
setTimeout→ 输出2
3. 更完整的异步顺序表
console.log('同步1');setTimeout(()=>console.log('setTimeout'),0);Promise.resolve().then(()=>{console.log('Promise1');returnPromise.resolve();}).then(()=>console.log('Promise2'));queueMicrotask(()=>console.log('queueMicrotask'));(async()=>{console.log('async start');awaitPromise.resolve();console.log('async end');// await 后的代码是微任务})();console.log('同步2');典型输出顺序：
同步1 同步2 async start Promise1 queueMicrotask Promise2 async end setTimeout4. async/await 的本质
async/await是Promise 的语法糖：
await后面的代码会被包装成Promise.then（微任务）await Promise.resolve()也会让后续代码进入微任务队列
asyncfunctiontest(){console.log('A');awaitPromise.resolve();console.log('B');// 相当于 .then 中的代码}test();console.log('C');// 输出：A → C → B5. 实际开发中的重要结论与最佳实践
微任务适合立即执行但不阻塞渲染的逻辑：
- DOM 更新后的回调
- 状态更新后的连锁操作
- 错误处理
宏任务适合需要延迟或分批执行的逻辑：
- 防抖、节流
- UI 渲染后操作（
setTimeout(..., 0)） - 长时间任务拆分
避免微任务饥饿：
// 错误示例：可能卡死页面functionrecursion(){Promise.resolve().then(recursion);}手动控制任务类型：
// 强制放入宏任务setTimeout(()=>{...},0);// 强制放入微任务queueMicrotask(()=>{...});Node.js vs 浏览器：
- Node.js 有
process.nextTick（比微任务还早） - Node.js 事件循环阶段更多（timers → pending → poll → check 等）
- Node.js 有
6. 面试/调试技巧
- 在 Chrome DevTools 中使用Performance面板录制，可清晰看到 Microtask 和 Macrotask。
- 使用
console.trace()在回调中查看调用栈。 - 理解
requestAnimationFrame（在渲染前，属于宏任务但特殊）。
一句话总结：
同步代码 > 所有微任务（Promise、await、queueMicrotask）> 宏任务（setTimeout、I/O）
掌握了微任务 vs 宏任务，你就真正理解了 JavaScript 异步的核心机制。
想继续深入吗？我可以接着给你写：
- 完整浏览器/Node.js 事件循环阶段图解
- async/await 原理与常见陷阱（并发控制、错误处理）
- 手写 Promise + 微任务调度模拟
- 生产中异步任务调度最佳实践（p-limit、async-pool 等）
告诉我你目前最想深入哪一部分！
