浏览器性能优化：揭秘重绘与回流，化解浏览器卡顿危机

前端

2023-09-03 08:13:09

在这快节奏的数字时代，网站加载速度变得至关重要，因为它直接影响用户体验和网站转化率。而重绘和回流，这两位幕后黑手，正悄悄地扼杀着浏览器的性能。掌握它们，就能破解浏览器卡顿危机的密码。

重绘与回流的本质

重绘（Repaint）： 当页面元素的外观发生变化（例如颜色、字体或边框），但元素的位置和结构保持不变时，就会发生重绘。浏览器会重新绘制受影响的像素，从而更新显示内容。
回流（Reflow）： 当页面元素的位置或结构发生变化（例如添加或删除元素、调整窗口大小），就会发生回流。浏览器需要重新计算受影响元素及其所有后代元素的几何属性，然后重新渲染整个区域。

优化重绘与回流的技巧

优化重绘：

避免频繁修改元素的样式。
使用 CSS3 硬件加速，如 transform 和 opacity。
使用合成层（compositing layers）隔离不同元素。

优化回流：

避免在循环或事件处理程序中修改 DOM。
使用 CSS display: none 代替移除元素。
测量元素尺寸和位置，避免频繁重新计算。

实践案例

示例 1：避免频繁修改 DOM

// 避免使用频繁的 DOM 修改
for (let i = 0; i < 1000; i++) {
  document.body.innerHTML = `Element ${i}`;
}

// 使用循环外的 DOM 修改
document.body.innerHTML = '';
for (let i = 0; i < 1000; i++) {
  const element = document.createElement('div');
  element.innerHTML = `Element ${i}`;
  document.body.appendChild(element);
}

示例 2：使用 CSS display: none 代替移除元素

// 避免使用移除元素
document.getElementById('element').remove();

// 使用 CSS `display: none`
document.getElementById('element').style.display = 'none';

示例 3：测量元素尺寸和位置

// 避免频繁重新计算元素尺寸和位置
const element = document.getElementById('element');
const width = element.offsetWidth;
const height = element.offsetHeight;

// 在需要时重新计算
if (width !== element.offsetWidth || height !== element.offsetHeight) {
  // 执行必要的操作
}