浏览器渲染原理与性能优化全解析

以下是关于浏览器渲染原理及回流、重绘的详细解析，结合技术实现与性能优化策略：

---

一、浏览器渲染核心流程

1. 解析阶段

   • 构建DOM树：浏览器解析HTML标签生成树形结构的文档对象模型（DOM），每个节点对应一个HTML元素。
   • 生成CSSOM树：解析CSS样式表（包括继承和层叠规则），形成CSS对象模型树。
   • 合成渲染树：将DOM树与CSSOM树合并为渲染树（Render Tree），仅包含可见节点（如 display:none 的元素不加入）。

2. 布局阶段（Layout/Reflow）
   浏览器计算渲染树中每个节点的精确位置和尺寸（如坐标、宽高等），输出“盒模型”的绝对像素值，此过程称为布局或回流。

3. 绘制阶段（Paint/Repaint）
   根据渲染树的布局信息，将节点转换为屏幕上的实际像素，填充颜色、纹理等视觉属性，此过程称为绘制或重绘。

---

二、回流（Reflow）与重绘（Repaint）详解

1. 回流（Reflow）

• 定义：当元素尺寸、位置或布局结构变化（如窗口缩放、增删DOM节点），触发浏览器重新计算整个或部分页面的布局。
• 典型触发场景：
  • 修改元素几何属性（width/height/margin/padding）
  • 调整窗口大小
  • 读写 offsetTop、scrollHeight 等布局属性
  • 动态增删DOM节点

2. 重绘（Repaint）

• 定义：当元素外观改变（颜色、背景等）但布局不变时，浏览器仅重新绘制受影响区域。
• 典型触发场景：
  • 修改 color、background-color、visibility
  • 调整边框样式或阴影效果

3. 核心区别与性能影响

特性	回流（Reflow）	重绘（Repaint）
触发条件	布局/几何属性变化	视觉样式变化，布局不变
性能开销	⭐⭐⭐⭐⭐（需重新计算整个渲染树）	⭐⭐（仅重绘局部像素）
因果关系	回流必定触发重绘	重绘不触发回流

---

三、优化策略：减少回流与重绘

1. CSS优化

   • 避免使用表格布局（多次回流）
   • 使用 transform 替代 top/left 位移（触发GPU加速，跳过回流）
   • 将动画元素设置为 position: absolute/fixed（脱离文档流，减少影响范围）

2. DOM操作规范

   • 合并多次样式修改（如用 class 代替逐行修改 style）
   • 使用 documentFragment 批量操作DOM节点

   // 示例：使用文档碎片减少回流
   const fragment = document.createDocumentFragment();
   for (let i = 0; i < 100; i++) {