深入理解 JavaScript 事件循环（Event Loop）机制

在前端开发中，很多开发者都会接触到 JavaScript 的异步机制，例如 Promise、setTimeout、async/await 等。但如果不了解事件循环（Event Loop），就很容易在复杂逻辑中出现执行顺序错误的问题。

JavaScript 是单线程运行的，但浏览器通过 任务队列（Task Queue） 和 微任务队列（Microtask Queue） 来实现异步执行。

事件循环的基本流程如下：

1. 执行当前调用栈中的同步代码

2. 同步代码执行完后，检查微任务队列

3. 执行所有微任务

4. 再执行宏任务队列中的任务

5. 重复以上流程

例如下面的代码：

 

console.log("A")

setTimeout(() => {
console.log("B")
}, 0)

Promise.resolve().then(() => {
console.log("C")
})

console.log("D")

 

执行顺序为：

 

A
D
C
B

 

原因是：

• Promise.then 属于 微任务

• setTimeout 属于 宏任务

在事件循环中，微任务优先级高于宏任务。

理解这一点对于处理复杂异步流程非常重要，例如在框架内部调度更新、批量 DOM 更新等场景中都依赖微任务机制。