浏览器事件循环机制详解

一、问题描述
浏览器事件循环（Event Loop）是JavaScript实现异步编程的核心机制。它决定了代码的执行顺序，处理任务队列、宏任务与微任务之间的调度。理解事件循环能帮助开发者避免常见的异步陷阱（如执行顺序问题），并优化性能。

二、关键概念

1. 单线程与异步：

   • JavaScript是单线程语言，但浏览器提供了Web API（如setTimeout、DOM事件、Ajax）处理异步操作。
   • 异步任务完成后，其回调函数被放入任务队列，等待主线程调用。

2. 事件循环的组成：

   • 调用栈（Call Stack）：执行同步代码（后进先出）。
   • 任务队列（Task Queue）：包括宏任务队列和微任务队列。
   • 事件循环线程：持续检查调用栈是否为空，然后按规则从队列中取任务执行。

三、任务分类与执行规则

1. 宏任务（Macro Task）：

   • 来源：script整体代码、setTimeout、setInterval、I/O操作、UI渲染、DOM事件回调。
   • 特点：每次事件循环只执行一个宏任务。

2. 微任务（Micro Task）：

   • 来源：Promise.then/catch/finally、async/await、MutationObserver、queueMicrotask。
   • 特点：在当前宏任务执行结束后立即执行所有微任务，直到微任务队列清空。

四、事件循环流程（分步详解）

1. 执行全局脚本（宏任务）：

   • 同步代码逐行入栈执行，遇到异步API（如setTimeout）时，将其回调函数注册到Web API环境，等待触发。
   • 示例：

     console.log("1");  
     setTimeout(() => console.log("2"), 0);  
     Promise.resolve().then(() => console.log("3"));  
     console.log("4");  
     

   • 同步代码输出：1、4。

2. 处理微任务：

   • 当前宏任务（脚本）执行完毕，检查微任务队列（此时包含Promise回调）。
   • 依次执行所有微任务，输出：3。

3. 渲染更新（如有需要）：

   • 浏览器可能在此阶段执行UI渲染（某些浏览器将渲染作为宏任务）。

4. 取下一个宏任务：

   • 从宏任务队列中取出setTimeout回调，执行并输出：2。

五、复杂场景分析

// 场景：嵌套微任务与宏任务  
console.log("Start");  

setTimeout(() => {  
  console.log("Timeout");  
  Promise.resolve().then(() => console.log("Promise inside Timeout"));  
}, 0);  

Promise.resolve()  
  .then(() => {  
    console.log("Promise 1");  
    queueMicrotask(() => console.log("Microtask in Promise"));  
  })  
  .then(() => console.log("Promise 2"));  

console.log("End");  

执行步骤：

1. 同步代码输出：Start、End。
2. 微任务队列：
   • 执行Promise 1，输出"Promise 1"，并添加新的微任务（Microtask in Promise）。
   • 执行微任务队列中的所有任务（包括新添加的），输出"Microtask in Promise"，然后触发Promise链的下一个then，输出"Promise 2"。
3. 宏任务队列：执行setTimeout回调，输出"Timeout"，其内部的Promise微任务立即执行，输出"Promise inside Timeout"。

最终输出顺序：
Start → End → Promise 1 → Microtask in Promise → Promise 2 → Timeout → Promise inside Timeout

六、常见面试问题

1. 为什么微任务优先级高于宏任务？

   • 确保异步操作的及时性（如Promise状态更新），避免渲染阻塞。

2. setTimeout(fn, 0)是否立即执行？

   • 否，它至少等待4ms（浏览器规范），且需等当前宏任务及所有微任务完成。

3. async/await的执行顺序：

   • await之前的代码同步执行，await后的代码相当于Promise.then（微任务）。

七、总结
事件循环的核心是：同步任务优先 → 微任务清空 → 渲染 → 宏任务依次执行。掌握此机制能有效解决异步代码调试、性能优化等问题。