浏览器消息循环

---

浏览器事件循环的完整与准确叙述（依据 W3C/WHATWG 规范）

---

一、核心机制

JavaScript 的 单线程模型 通过 事件循环（Event Loop） 管理异步操作，其设计核心如下：

1. 非阻塞执行：允许主线程在等待 I/O、定时器等操作时继续处理其他任务。
2. 优先级调度：任务（Task） 与 微任务（Microtask） 的分级调度，确保高优先级代码优先执行。
3. 与渲染流程同步：事件循环在每个循环中可能触发页面渲染，维持用户界面的流畅性。

---

二、严格术语定义

根据 WHATWG HTML 标准 (HTML Living Standard)：

• 任务（Task）：独立的、按顺序执行的工作单元，例如：
  • <script> 同步代码、setTimeout/setInterval 回调、用户事件处理（点击、键盘等）。
• 微任务（Microtask）：在当前任务完成后 立即执行 的高优先级回调，例如：
  • Promise.then、Promise.catch、MutationObserver 回调。
• 渲染步骤（Rendering Steps）：浏览器在适当时机更新页面显示的流程，包含：
  • 执行与渲染相关的回调（如 requestAnimationFrame）。
  • 计算样式（Style）、布局（Layout）、绘制（Paint）和合成（Composite）。

---

三、事件循环的详细处理流程

每轮事件循环（Event Loop Iteration）包含以下规范化步骤：

阶段 1：选择一个任务（Select a Task）

1. 从任务队列中取出最早的任务：
   • 任务队列可能有多个（如定时器队列、网络请求队列），但每个队列按先进先出（FIFO）顺序处理。
2. 执行该任务：
   • 运行至完成（Run to Completion），期间不会被其他任务中断。
   • 同步代码中对其他任务的调度（如新的 setTimeout）会被加入相应队列。

阶段 2：执行微任务检查点（Perform a Microtask Checkpoint）

1. 清空微任务队列：
   • 循环执行微任务队列中的所有微任务。
   • 若处理微任务期间生成 新的微任务，会持续执行直至队列为空。
2. 关键规则：
   • 微任务会在 当前任务结束后、渲染步骤开始前 全部完成。

阶段 3：渲染更新（Update the Rendering）

由浏览器决定是否在本轮循环执行渲染（通常依据屏幕刷新率，如 60Hz）：

1. 触发与渲染相关的回调：
   • requestAnimationFrame 回调：在样式计算和布局前执行，确保动画逻辑与垂直同步信号（VSync）对齐。
   • 其他渲染相关操作：例如 ResizeObserver 回调、MediaQuery 变更监听。
2. 渲染管线（Rendering Pipeline）：
   • 样式计算（Style）：确定每个节点的计算样式。
   • 布局（Layout）：计算节点在视口中的几何位置。
   • 绘制（Paint）：将布局结果转换为屏幕像素。
   • 合成（Composite）：将各图层合并为最终图像提交给屏幕。

阶段 4：处理空闲时间（Idle Period）

• 若存在空闲时段，触发 requestIdleCallback 回调，执行低优先级任务（如日志上报、预加载）。

---

四、执行顺序验证案例

console.log('Script Start'); // 任务-1（同步代码）

setTimeout(() => {
  console.log('setTimeout'); // 任务-2（新任务）
}, 0);

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

requestAnimationFrame(() => {
  console.log('rAF'); // 渲染步骤回调
});

console.log('Script End'); // 任务-1（同步代码结束）

输出顺序与解析：

1. Script Start → Script End：
   • 主任务（任务-1）依次执行同步代码。
2. Promise：
   • 当前任务结束后，清空微任务队列。
3. rAF：
   • 进入渲染步骤，执行 requestAnimationFrame 回调。
4. setTimeout：
   • 新任务（任务-2）在下一轮事件循环执行。

---

五、关键规则总结

1. 任务与微任务的优先级：
   • 微任务队列的优先级高于任务队列。
2. 不可中断性：
   • 每个任务和微任务执行时不可中断，直至代码运行完成。
3. 渲染的主动权在浏览器：
   • 并非每轮事件循环都会触发渲染，浏览器会根据优化策略（如页面是否可见、动画是否活跃）控制渲染频率。
4. 输入响应的优化：
   • 用户交互触发的任务（如点击事件）可能被优先调度。

---

六、术语对比表（社区 vs 规范）

社区常用术语	规范标准术语	解释
宏任务（MacroTask）	任务（Task）	基本调度单位，如 setTimeout 回调
微任务（MicroTask）	微任务（Microtask）	高优先级回调，在任务结束后立即执行
渲染队列	渲染步骤（Rendering Steps）	包含 rAF 和渲染管线操作

---

七、开发者实践指南

1. 避免阻塞主线程：
   • 拆分长任务：超过 50ms 的任务应将工作分割为小块，通过 setTimeout 或 requestIdleCallback 分散执行。
2. 合理利用微任务：
   • 快速响应异步结果：利用 Promise 进行链式调用，避免不必要的渲染延迟。
3. 动画与性能优化：
   • 始终使用 requestAnimationFrame：替代 setTimeout 执行动画，确保与浏览器渲染节奏同步。
4. 避免布局抖动：
   • 在渲染步骤前批量读取布局属性，减少强制同步布局（Forced Synchronous Layout）。

---

八、流程图解

---

九、标准文档依据

• 任务与微任务：HTML Standard - Event Loops
• 渲染步骤：HTML Standard - Update the Rendering
• requestAnimationFrame：HTML Standard - Animation Frames

---

通过以上规范化的叙述，可准确理解浏览器事件循环的核心机制，避免因术语混淆导致的开发误区。