浏览器的重排(Reflow)和重绘(Repaint)

1. 重排(Reflow)的定义与触发条件

重排(Reflow)是指浏览器重新计算页面元素的几何属性（位置和大小）的过程。当页面布局和几何信息发生变化时，浏览器需要重新计算各个元素的位置和大小，这个过程称为重排。

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

• 添加或删除可见的DOM元素
• 元素位置改变
• 元素尺寸改变（包括外边距、内边距、边框厚度、宽度、高度等属性变化）
• 内容改变，如文本变化或图片被另一个不同尺寸的图片所替代
• 页面渲染器初始化
• 浏览器窗口尺寸改变（resize事件发生时）
• 计算offsetWidth和offsetHeight等属性时
• 设置style属性的值

2. 重绘(Repaint)的定义与触发条件

重绘(Repaint)是指浏览器重新绘制页面元素外观的过程。当元素的外观发生改变，但不影响布局时，浏览器会进行重绘。

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

• 颜色（color、background-color等）改变
• 边框样式（border-style等）改变
• 文本装饰（text-decoration等）改变
• 阴影（box-shadow等）改变
• 可见性（visibility）改变（但不影响布局）

3. 重排和重绘对性能的影响

重排和重绘都会消耗浏览器资源，影响页面性能，但重排的影响比重绘更大：

• 重排的影响：

  • 重排是浏览器渲染过程中最耗性能的操作之一
  • 一次重排可能导致整个页面或部分页面的重新布局
  • 重排会触发后续的重绘，形成"重排-重绘"链
  • 复杂页面的重排可能导致明显的页面延迟或卡顿，影响用户体验

• 重绘的影响：

  • 重绘比重排消耗的性能少，但频繁的重绘同样会影响性能
  • 重绘不会改变页面布局，只改变元素外观
  • 复杂的视觉效果（如阴影、渐变等）会增加重绘的成本

• 性能影响的具体表现：

  • 页面响应时间延长
  • 动画效果不流畅
  • 滚动卡顿
  • 用户交互延迟
  • 电池消耗增加（移动设备）

4. 如何减少重排和重绘

4.1 减少重排的方法

1. 批量修改DOM：

   • 使用文档片段（DocumentFragment）进行批量DOM操作
   • 将元素设置为display: none，进行修改后再显示
   • 使用cloneNode和replaceNode进行批量更新

2. 避免频繁读取布局信息：

   • 避免在循环中连续读取offsetWidth、offsetHeight等属性
   • 使用现代浏览器提供的requestAnimationFrame进行视觉更新

3. 使用CSS transform代替位置属性：

   • 使用transform: translate()代替top/left进行位移
   • 使用transform: scale()代替width/height进行缩放

4. 使用绝对定位：

   • 对频繁变动的元素使用绝对定位，使其脱离文档流
   • 减少对其他元素的影响范围

5. 使用Flexbox或Grid布局：

   • 现代布局算法比重排更高效
   • 减少布局计算的复杂度

4.2 减少重绘的方法

1. 使用CSS opacity代替visibility：

   • opacity变化会触发合成层（Compositor）优化
   • 某些情况下可以避免重绘

2. 使用will-change或transform创建新的合成层：

   • 将频繁变动的元素提升为独立的合成层
   • 避免对其他层的影响

3. 减少复杂效果的使用：

   • 减少box-shadow、text-shadow、filter等复杂效果的使用
   • 特别是在动画或频繁变化的元素上

4. 使用硬件加速：

   • 对动画元素使用transform: translateZ(0)或will-change: transform
   • 启用GPU加速，减少CPU负担

4.3 通用优化策略

1. 使用虚拟DOM：

   • React等框架使用虚拟DOM进行批量更新
   • 减少实际DOM操作次数

2. 防抖和节流：

   • 对resize、scroll等事件进行防抖和节流处理
   • 减少事件触发的频率

3. 使用CSS动画代替JavaScript动画：

   • CSS动画通常由浏览器优化
   • 可以利用GPU加速

4. 避免强制同步布局：

   • 不要在JavaScript中连续进行"读-写"操作
   • 使用FastDOM等库强制分离读写操作

5. 实际示例和最佳实践

5.1 批量DOM操作示例

// 不好的做法：多次操作DOM，导致多次重排
const list = document.getElementById('list');
for (let i = 0; i < 100; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  list.appendChild(item); // 每次循环都会触发重排
}

// 好的做法：使用文档片段进行批量操作
const list = document.getElementById('list');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  fragment.appendChild(item); // 在内存中操作，不触发重排
}
list.appendChild(fragment); // 只触发一次重排

5.2 避免强制同步布局示例

// 不好的做法：强制同步布局
function updateElement() {
  const elem = document.getElementById('my-element');
  // 读取布局信息，触发重排
  const width = elem.offsetWidth;
  // 写入样式，又触发重排
  elem.style.width = (width * 2) + 'px';
  // 再次读取布局信息，再次触发重排
  const newWidth = elem.offsetWidth;
  // 又写入样式，再次触发重排
  elem.style.height = (newWidth / 2) + 'px';
}

// 好的做法：分离读写操作
function updateElement() {
  const elem = document.getElementById('my-element');
  // 先读取所有需要的布局信息
  const width = elem.offsetWidth;
  const height = elem.offsetHeight;
  
  // 然后一次性写入所有样式
  elem.style.width = (width * 2) + 'px';
  elem.style.height = (height / 2) + 'px';
}

5.3 使用CSS transform示例

/* 不好的做法：使用left/top改变位置 */
.moving-element {
  position: absolute;
  left: 0;
  top: 0;
  transition: left 0.5s, top 0.5s;
}
.moving-element.active {
  left: 100px;
  top: 100px;
}

/* 好的做法：使用transform改变位置 */
.moving-element {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.5s;
  will-change: transform; /* 提示浏览器创建合成层 */
}
.moving-element.active {
  transform: translate(100px, 100px);
}

5.4 使用requestAnimationFrame示例

// 不好的做法：直接使用setTimeout或setInterval
function animateElement() {
  const elem = document.getElementById('animated-element');
  let position = 0;
  
  setInterval(() => {
    position += 5;
    elem.style.transform = `translateX(${position}px)`;
  }, 16); // 约60fps
}

// 好的做法：使用requestAnimationFrame
function animateElement() {
  const elem = document.getElementById('animated-element');
  let position = 0;
  
  function animate() {
    position += 5;
    elem.style.transform = `translateX(${position}px)`;
    requestAnimationFrame(animate); // 在浏览器下一次重绘之前执行
  }
  
  requestAnimationFrame(animate);
}