事件循环是JavaScript异步执行的核心机制，其执行顺序为：清空调用栈→执行所有微任务→取一个宏任务→重复。微任务（如Promise.then）优先级高于宏任务（如setTimeout），故输出顺序为1→4→3→2。
JavaScript 的事件循环（Event Loop）是理解异步行为的核心机制。它决定了代码何时执行、回调如何排队、为什么 setTimeout 不会“准时”、以及为什么长时间运行的同步代码会让页面卡死——这些都不是 bug，而是事件循环按设计工作的结果。
事件循环的基本流程：调用栈 + 任务队列
JavaScript 是单线程的，只有一个主线程执行代码。事件循环持续监控两个关键部分：
- 调用栈（Call Stack）：当前正在执行的函数堆叠，遵循后进先出（LIFO）规则。
-
任务队列（Task Queue，也叫宏任务队列）：存放来自 DOM 事件、
setTimeout、setInterval、setImmediate（Node.js）等产生的回调函数。 -
微任务队列（Microtask Queue）：存放
Promise.then/catch/finally、MutationObserver、queueMicrotask等产生的回调，优先级高于宏任务。
事件循环每轮执行顺序是：清空当前调用栈 → 执行所有微任务（直到微任务队列为空）→ 取一个宏任务执行 → 再清空微任务 → 继续下一轮。这个顺序解释了为什么 Promise 总比 setTimeout 先执行，哪怕后者延时为 0。
宏任务 vs 微任务：实际执行顺序的关键
下面这段代码的输出顺序常让人困惑，但事件循环能清晰解释：
立即学习“Java免费学习笔记（深入）”；
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
输出是：1 → 4 → 3 → 2。原因如下：
- 1 和 4 是同步代码，立即入栈执行；
-
setTimeout回调进入宏任务队列； -
Promise.then回调进入微任务队列； - 同步代码执行完后，事件循环先处理微任务队列（输出 3），再取下一个宏任务（输出 2）。
为什么理解事件循环很重要
不理解事件循环，就容易写出阻塞 UI、误判异步时序、难以调试竞态问题的代码：
-
避免界面冻结：一个耗时 500ms 的 for 循环会霸占主线程，让按钮点击、滚动、动画全部卡住——因为事件循环无法插入任何任务。应改用
setTimeout分片、requestIdleCallback或 Web Worker。 -
正确处理异步依赖：比如在
fetch后立即读取 DOM 节点，却忘了 DOM 渲染是微任务之后的渲染帧（属于另一阶段），可能读不到更新后的内容；此时需用await new Promise(requestAnimationFrame)或queueMicrotask做协调。 -
写出可预测的测试逻辑：单元测试中若依赖
setTimeout模拟延迟，但实际想等 Promise 完成，却用了jest.runAllTimers()，就会漏掉微任务，导致断言失败。
一个小技巧：快速判断代码何时执行
遇到不确定执行时机的异步操作，可以这样归类：
- 同步代码 → 立即执行；
-
Promise.then、queueMicrotask、MutationObserver→ 下一个微任务； -
setTimeout、setInterval、postMessage、I/O 回调（Node.js）→ 下一个宏任务； -
requestAnimationFrame→ 下一帧绘制前（不属于标准事件循环队列，但有固定调度时机）。
基本上就这些。事件循环不复杂，但容易忽略细节——而正是这些细节，决定你的异步代码是稳健还是玄学。
