为什么 Promise 比 setTimeout 先执行？——JavaScript 事件循环与异步顺序完全指南

为什么 Promise 比 setTimeout 先执行？——JavaScript 事件循环与异步顺序完全指南

这是 JavaScript 异步中最经典也最容易困惑的问题之一。核心答案是：

Promise 的回调属于 Microtask（微任务），setTimeout 属于 Macrotask（宏任务）。微任务队列会在当前宏任务执行完毕后、下一个宏任务开始前被清空。

1. JavaScript 事件循环（Event Loop）核心模型（2026 年最新标准）

JavaScript 是单线程语言，但通过事件循环实现了异步。

执行流程（极简版）：

1. 执行同步代码（主线程）
2. 执行完当前宏任务后，清空所有微任务（Microtask Queue）
3. 执行下一个宏任务（Macrotask）
4. 重复以上过程

两大任务队列对比

关键规则：

• 每次事件循环只会执行一个宏任务
• 但会执行所有微任务（直到队列为空）
• 微任务中新增的微任务也会在本次继续执行（可能导致微任务饥饿）

2. 经典示例解析

console.log('1');                    // 同步

setTimeout(() => {
    console.log('2');                // 宏任务
}, 0);

Promise.resolve().then(() => {
    console.log('3');                // 微任务
});

console.log('4');                    // 同步

输出顺序：

1
4
3
2

执行过程：

1. 同步代码执行 → 输出 1、4
2. 当前宏任务结束 → 清空微任务队列 → 输出 3
3. 进入下一个事件循环 → 执行 setTimeout → 输出 2

3. 更完整的异步顺序表

console.log('同步1');

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

Promise.resolve().then(() => {
    console.log('Promise1');
    return Promise.resolve();
}).then(() => console.log('Promise2'));

queueMicrotask(() => console.log('queueMicrotask'));

(async () => {
    console.log('async start');
    await Promise.resolve();
    console.log('async end');     // await 后的代码是微任务
})();

console.log('同步2');

典型输出顺序：

同步1
同步2
async start
Promise1
queueMicrotask
Promise2
async end
setTimeout

4. async/await 的本质

async/await 是 Promise 的语法糖：

• await 后面的代码会被包装成 Promise.then（微任务）
• await Promise.resolve() 也会让后续代码进入微任务队列

async function test() {
    console.log('A');
    await Promise.resolve();
    console.log('B');   // 相当于 .then 中的代码
}

test();
console.log('C');

// 输出：A → C → B

5. 实际开发中的重要结论与最佳实践

1. 微任务适合立即执行但不阻塞渲染的逻辑：

• DOM 更新后的回调
• 状态更新后的连锁操作
• 错误处理

1. 宏任务适合需要延迟或分批执行的逻辑：

• 防抖、节流
• UI 渲染后操作（setTimeout(..., 0)）
• 长时间任务拆分

1. 避免微任务饥饿：

   // 错误示例：可能卡死页面
   function recursion() {
       Promise.resolve().then(recursion);
   }

4. 手动控制任务类型：

   // 强制放入宏任务
   setTimeout(() => {...}, 0);

   // 强制放入微任务
   queueMicrotask(() => {...});

5. Node.js vs 浏览器：

• Node.js 有 process.nextTick（比微任务还早）
• Node.js 事件循环阶段更多（timers → pending → poll → check 等）

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 等）

告诉我你目前最想深入哪一部分！