CSS重绘与重排优化：减少浏览器渲染开销

1 理解浏览器渲染流程

浏览器渲染页面是一个复杂的过程，了解此过程是优化重绘与重排的基础。当浏览器加载页面时，它会经历以下步骤：构建DOM树、构建CSSOM树、合成渲染树、布局（Layout，即重排）和绘制（Paint，即重绘）。

渲染树是DOM树和CSSOM树的结合体，包含所有可见的DOM内容以及每个节点的样式信息。渲染树构建完成后，浏览器进入布局阶段，计算每个节点在屏幕上的精确位置和大小，这个计算布局的过程就是重排。布局完成后，浏览器将渲染树的每个节点转换为屏幕上的实际像素，这个过程就是重绘。

理解这些步骤的关键点在于：重排必定会触发重绘，因为布局改变后外观需要更新；但重绘不一定触发重排，如果只是视觉变化而布局未变。

2 什么是重排与重排

2.1 重排（Reflow/Layout）

重排是指当渲染树中元素的尺寸、布局、位置或内容发生改变时，浏览器需要重新计算所有受影响元素的几何属性（位置和大小），并更新整个渲染树的过程。

触发重排的常见操作包括：

改变窗口大小
更新元素内容
调整CSS盒模型相关属性（如宽度、高度、边距）
操作DOM（添加或删除可见元素）
读取某些布局属性（如offsetTop、clientHeight等）

重排的本质是浏览器对页面空间布局的重新规划。这一过程如同城市规划师重新绘制街区地图，需要精确计算每个页面元素的坐标、尺寸，并重新规划元素间的排列关系。

2.2 重绘（Repaint）

重绘是指当元素的样式发生改变，但不影响其布局时，浏览器只需重新绘制元素的外观到屏幕的过程。

触发重绘的常见操作包括：

改变颜色属性
调整背景色
修改边框颜色
改变可见性（visibility）

重绘则聚焦于视觉外观的更新，浏览器无需重新计算布局，只需更新元素的像素绘制指令。

2.3 重排与重绘的关系

下面的表格对比了重排与重绘的关键特性：

特性	重排（Reflow/Layout）	重绘（Repaint）
触发原因	布局属性变化（尺寸、位置、结构）	非布局属性变化（颜色、背景、阴影）
计算复杂度	高，需要重新计算几何位置	低，只需更新外观
性能影响	高，可能引发连锁反应	相对较低，但频繁操作仍耗性能
触发顺序	必定触发后续重绘	不一定触发重排
优化优先级	高	中

3 识别触发重排与重绘的操作

3.1 常见触发重排的CSS属性

以下CSS属性的修改通常会触发重排：

位置相关：top, left, right, bottom
尺寸相关：width, height, padding, margin, border
布局相关：display, position, float, clear
字体相关：font-size, font-weight, line-height
内容相关：text-align, overflow, vertical-align

3.2 常见触发重绘的CSS属性

以下CSS属性的修改通常只触发重绘：

颜色相关：color, background-color, border-color
装饰相关：outline, outline-color, box-shadow
背景相关：background-image, background-size
可见性：visibility, opacity

3.3 触发重排的JavaScript操作

以下JavaScript操作通常会触发重排：

添加或删除可见的DOM元素
改变元素位置、尺寸或内容
页面初始渲染
浏览器窗口大小改变
读取某些布局属性（如offsetWidth、scrollHeight等）

4 优化策略与实战技巧

4.1 批量修改样式

避免频繁单独修改样式属性，通过以下方式批量处理：

/* 定义批量样式 */
.zzw_batch-style {
  width: 200px;
  height: 100px;
  margin: 10px;
  background: #2c3e50;
}

// 优化前：多次单独修改（可能触发多次重排）
zzw_element.style.width = "200px";
zzw_element.style.height = "100px";
zzw_element.style.margin = "10px";

// 优化后：一次class切换（仅一次重排）
zzw_element.classList.add("zzw_batch-style");

另一种批量处理的方法是使用cssText：

// 使用cssText批量设置样式
zzw_element.style.cssText = "width: 200px; height: 100px; margin: 10px;";

4.2 使用transform和opacity优化动画

transform和opacity属性实现的动画通常由合成层处理，跳过布局和绘制阶段，直接由GPU合成，效率极高。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>找找网 - CSS动画优化示例</title>
  <style>
    .zzw_animated-box {
      width: 100px;
      height: 100px;
      background: #3498db;
      transition: transform 0.3s ease;
    }
    .zzw_animated-box:hover {
      /* 使用transform而不是修改left/top */
      transform: translateX(100px) scale(1.1);
    }
  </style>
</head>
<body>
  <div class="zzw_animated-box"></div>
</body>
</html>

4.3 避免强制同步布局

浏览器为了优化性能，会延迟重排，但若在修改样式前读取布局属性，浏览器会强制触发重排以获取最新值。

// 错误示范：强制同步布局
function zzw_updateWidth(boxes) {
  for (let i = 0; i < boxes.length; i++) {
    // 读取布局属性，触发强制重排
    const zzw_height = boxes[i].offsetHeight;
    // 修改样式，再次触发重排
    boxes[i].style.height = zzw_height + 10 + 'px';
  }
}

// 正确做法：先读取，再修改
function zzw_optimizedUpdateWidth(boxes) {
  // 先批量读取所有布局属性
  const zzw_heights = Array.from(boxes).map(box => box.offsetHeight);

  // 再批量修改样式
  zzw_heights.forEach((zzw_height, i) => {
    boxes[i].style.height = zzw_height + 10 + 'px';
  });
}

4.4 离线DOM操作

对于复杂的DOM操作，可以先将元素脱离文档流，修改完成后再重新插入：

// 方法1：隐藏元素进行操作
function zzw_offlineOperation(element) {
  // 隐藏元素（脱离文档流）
  element.style.display = 'none';

  // 进行批量DOM操作（此时不会触发重排）
  // ... 操作内容 ...

  // 重新显示元素（只触发一次重排）
  element.style.display = 'block';
}

// 方法2：使用文档片段
function zzw_batchAppendItems(container, items) {
  const zzw_fragment = document.createDocumentFragment();

  items.forEach(zzw_item => {
    const zzw_li = document.createElement('li');
    zzw_li.textContent = zzw_item;
    zzw_fragment.appendChild(zzw_li);
  });

  // 一次性插入DOM，只触发一次重排
  container.appendChild(zzw_fragment);
}

4.5 使用will-change提前告知浏览器

will-change属性可以提前告知浏览器元素可能发生的变化，让浏览器提前准备优化策略。

.zzw_optimized-element {
  will-change: transform;
  transition: transform 0.3s;
}

.zzw_optimized-element:hover {
  transform: translateX(100px);
}

4.6 合理使用contain属性

contain属性告诉浏览器元素的变化不会影响外部布局，可限制重排/重绘的范围。

.zzw_isolated-component {
  contain: layout paint;
  /* 布局和绘制独立，内部变化不影响外部 */
}

5 性能检测与监控

5.1 使用浏览器开发者工具检测

Chrome开发者工具提供了多种检测重排和重绘的方法：

绘制闪烁工具：在”More Tools” → “Rendering”中勾选”Paint flashing”，重绘区域会闪烁绿色。
性能面板：使用Performance面板录制页面操作，查看”Layout”（重排）和”Paint”（重绘）的耗时。
覆盖面板：使用Coverage面板检测未使用的CSS代码。

5.2 监控强制同步布局

以下代码示例可以帮助检测潜在的强制同步布局问题：

function zzw_detectForcedSyncLayout() {
  const zwu_boxes = document.querySelectorAll('.zzw_box');
  const zzw_badPattern = () => {
    // 反模式：读取后立即写入
    zwu_boxes.forEach(box => {
      const zzw_width = box.offsetWidth; // 读取，可能触发强制同步布局
      box.style.width = zzw_width + 10 + 'px'; // 写入
    });
  };

  const zzw_goodPattern = () => {
    // 好模式：先读取所有，再写入所有
    const zzw_widths = Array.from(zzu_boxes).map(box => box.offsetWidth);
    zzw_widths.forEach((width, i) => {
      zzu_boxes[i].style.width = width + 10 + 'px';
    });
  };

  return {
    zzw_badPattern,
    zzw_goodPattern
  };
}

6 综合优化示例

下面的完整示例展示了如何在实际项目中优化重排和重绘：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>找找网 - 重排重绘优化示例</title>
  <style>
    /* 使用类名切换而不是直接修改样式 */
    .zzw_item {
      padding: 10px;
      border-bottom: 1px solid #ddd;
      transition: background-color 0.3s ease;
    }

    .zzw_item.highlight {
      background-color: #f1c40f;
    }

    /* 使用transform优化动画 */
    .zzw_floating-action {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 60px;
      height: 60px;
      background: #e74c3c;
      border-radius: 50%;
      transition: transform 0.3s ease;
      will-change: transform;
    }

    .zzw_floating-action:hover {
      transform: scale(1.1);
    }

    /* 使用contain限制重排范围 */
    .zzw_isolated-container {
      contain: layout paint;
    }
  </style>
</head>
<body>
  <div id="zzw_listContainer" class="zzw_isolated-container">
    <div class="zzw_item">项目 1</div>
    <div class="zzw_item">项目 2</div>
    <div class="zzw_item">项目 3</div>
  </div>

  <div class="zzw_floating-action"></div>

  <script>
    // 批量操作DOM的示例
    function zzw_addMultipleItems(container, items) {
      // 使用文档片段批量操作
      const zzw_fragment = document.createDocumentFragment();

      items.forEach(zzw_itemText => {
        const zzw_item = document.createElement('div');
        zzw_item.className = 'zzw_item';
        zzw_item.textContent = zzw_itemText;
        zzw_fragment.appendChild(zzw_item);
      });

      // 一次性插入到DOM中
      container.appendChild(zzw_fragment);
    }

    // 使用requestAnimationFrame优化动画
    function zzw_animateElement(element) {
      let zzw_start = null;

      function zzw_step(timestamp) {
        if (!zzw_start) zzw_start = timestamp;
        const zzw_progress = timestamp - zzw_start;

        // 使用transform而不是修改top/left
        element.style.transform = `translateX(${Math.min(zzw_progress / 10, 200)}px)`;

        if (zzw_progress < 2000) {
          window.requestAnimationFrame(zzw_step);
        }
      }

      window.requestAnimationFrame(zzw_step);
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', () => {
      const zzw_container = document.getElementById('zzw_listContainer');
      const zzw_newItems = ['项目 4', '项目 5', '项目 6'];

      // 批量添加新项目
      zzw_addMultipleItems(zzw_container, zzw_newItems);

      // 为所有项目添加事件监听
      const zzw_allItems = document.querySelectorAll('.zzw_item');
      zzw_allItems.forEach(zzw_item => {
        zzw_item.addEventListener('click', function() {
          // 使用类名切换而不是直接修改样式
          this.classList.toggle('highlight');
        });
      });

      // 启动动画
      const zzw_fab = document.querySelector('.zzw_floating-action');
      zzw_animateElement(zzw_fab);
    });
  </script>
</body>
</html>

7 优化策略对比

下面的表格总结了各种优化策略的适用场景和效果：

优化策略	适用场景	优化效果	实现难度
批量修改样式	需要同时修改多个样式属性	减少重排次数	低
使用transform和opacity	动画、位移、透明度变化	避免重排和重绘，使用GPU加速	中
避免强制同步布局	需要读取布局属性后修改样式	减少不必要的重排	中
离线DOM操作	复杂的DOM操作	大幅减少重排次数	中
使用will-change	预期会有复杂动画的元素	浏览器提前优化	低
使用contain属性	独立组件、频繁更新的UI部分	限制重排/重绘范围	中
优化CSS选择器	所有CSS代码	减少样式计算时间	低

8 避免的常见误区

在优化重排和重绘时，需要注意以下常见误区：

过度优化：不是所有的重排和重绘都需要优化，只有当它们真正导致性能问题时才需要重点关注。
滥用硬件加速：过度使用transform3d或will-change会导致额外的内存占用，可能反而降低性能。
忽视JavaScript性能：除了CSS优化，JavaScript执行效率也会影响渲染性能。
不考虑实际设备：在低性能设备上测试优化效果，而不仅仅是在开发机器上测试。

本篇教程知识点总结

知识点	知识内容
浏览器渲染流程	浏览器渲染包含构建DOM树、CSSOM树、渲染树、布局（重排）和绘制（重绘）步骤
重排与重绘定义	重排是重新计算元素布局的过程，重绘是更新元素外观但不影响布局的过程
触发条件	重排由布局属性变化触发，重绘由视觉属性变化触发，重排必定引起重绘
性能影响	重排性能开销大于重绘，频繁触发都会导致页面卡顿
批量操作	通过类名切换、cssText或DocumentFragment批量处理样式和DOM修改
动画优化	使用transform和opacity实现动画，触发GPU加速，避免重排和重绘
布局抖动	避免在读取布局属性后立即修改样式，防止强制同步布局
隔离变化	使用contain属性或定位元素隔离变化范围，减少影响区域
性能监测	使用浏览器开发者工具检测重排和重绘，定位性能瓶颈

CSS教程

CSS基础入门

CSS核心样式属性

CSS布局技术

CSS高级特性

CSS功能模块

CSS架构与工程化

CSS琐碎知识归类

CSS实战与最佳实践

CSS重绘与重排优化