JavaScript中的事件循环与异步执行机制

在JavaScript中，事件循环（Event Loop）是处理异步操作的核心机制。由于JavaScript是单线程的，它通过事件循环实现非阻塞的异步行为。下面我们逐步拆解其工作原理。

1. 基本概念：调用栈、任务队列与事件循环

• 调用栈（Call Stack）：
  用于跟踪当前执行的函数。当函数被调用时，它会被推入栈顶；执行完毕后弹出。

  function foo() { bar(); }
  function bar() { console.log("Hello"); }
  foo(); // 执行过程：foo入栈 -> bar入栈 -> console.log入栈 -> 依次弹出
  

• 任务队列（Task Queue）：
  异步操作（如定时器、网络请求）完成后，其回调函数会被放入任务队列，等待调用栈空闲时执行。

• 事件循环：
  不断检查调用栈是否为空。若为空，则将任务队列中的回调函数依次推入调用栈执行。

2. 异步任务的分类

异步任务分为两类，对应不同的队列优先级：

1. 宏任务（Macrotask）：
   • 包括：setTimeout、setInterval、I/O操作、UI渲染等。
   • 特点：每次事件循环只执行一个宏任务。
2. 微任务（Microtask）：
   • 包括：Promise.then、MutationObserver、queueMicrotask等。
   • 特点：在当前宏任务执行结束后立即执行所有微任务，优先级高于宏任务。

3. 事件循环的具体流程

1. 执行一个宏任务（如脚本主代码）。
2. 遇到异步操作时：
   • 宏任务（如setTimeout）将其回调加入宏任务队列。
   • 微任务（如Promise.then）将其回调加入微任务队列。
3. 当前宏任务执行完毕后，依次执行所有微任务（直到微任务队列清空）。
4. 必要时进行UI渲染。
5. 从宏任务队列中取出下一个宏任务，重复上述过程。

4. 示例分析

console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("End");

执行步骤：

1. 宏任务（主代码）开始：
   • 输出 "Start"。
   • setTimeout 回调加入宏任务队列。
   • Promise.then 回调加入微任务队列。
   • 输出 "End"。
2. 当前宏任务结束，检查微任务队列：
   • 执行 Promise.then，输出 "Promise"。
3. 微任务队列清空后，执行下一个宏任务：
   • 输出 "Timeout"。

结果：

Start
End
Promise
Timeout

5. 关键点与常见误区

• 微任务优先：微任务会在下一个宏任务之前全部执行，可能导致宏任务（如UI更新）被延迟。
• 嵌套异步：微任务中产生的微任务会继续在当前周期执行，而宏任务需等待下一轮事件循环。
• 阻塞风险：若微任务队列无限添加任务，会导致事件循环无法处理宏任务或UI渲染。

6. 实际应用场景

• 优化渲染：将大量计算拆分为微任务，避免阻塞UI。
• 优先级控制：通过 queueMicrotask 确保代码在渲染前执行。
• 异步顺序管理：利用微任务保证多个Promise的按序执行。

通过理解事件循环的分层机制，可以更精准地控制异步代码的执行时机，避免常见的时序错误。