返回

浏览器知识点整理（九）：揭秘重排、重绘和合成

前端

引言

在了解浏览器渲染流水线之前，我们先来了解一下什么是重排、重绘和合成。

  • 重排（reflow） ：当元素的几何属性（如位置、大小或边距）发生变化时，浏览器需要重新计算元素的布局。这可能导致页面上的其他元素也需要重新布局，进而触发重排。
  • 重绘（repaint） ：当元素的外观属性（如颜色、背景或字体）发生变化时，浏览器需要重新绘制元素。这通常不会影响页面布局，但会消耗大量资源。
  • 合成（composite） ：当浏览器将多个图层组合成一个最终图像时，就发生了合成。这通常是渲染流水线的最后一个步骤。

浏览器渲染流水线

现在，我们来了解一下浏览器渲染流水线。当浏览器收到一个需要渲染的页面时，它会执行以下步骤：

  1. 解析HTML和CSS ：浏览器首先会解析HTML和CSS代码，并构建一个DOM树和一个CSSOM树。
  2. 布局（layout） ：浏览器使用DOM树和CSSOM树来计算每个元素的几何属性。这可能导致重排。
  3. 绘制（paint） ：浏览器使用几何属性来绘制每个元素的外观。这可能导致重绘。
  4. 合成 ：浏览器将多个图层组合成一个最终图像。

如何减少重排和重绘

为了提高性能，我们应该尽量减少重排和重绘。以下是一些实用的建议：

  • 避免频繁修改元素的几何属性 ：如果需要修改元素的几何属性，尽量一次性修改，而不是多次修改。
  • 使用CSS动画或过渡 ：如果需要改变元素的外观，尽量使用CSS动画或过渡，而不是直接修改元素的样式。
  • 使用硬件加速 ：硬件加速可以显著提高渲染性能。为了启用硬件加速，可以在CSS中使用transform或translate属性。
  • 减少DOM操作 ：DOM操作可能会导致重排和重绘。因此，尽量减少DOM操作。

结论

重排、重绘和合成是浏览器渲染流水线的重要组成部分。通过减少重排和重绘，我们可以提高浏览器的渲染性能。

示例

以下是一些减少重排和重绘的示例：

  • 使用CSS动画或过渡来改变元素的外观 ：
.element {
  transition: all 1s ease-in-out;
}

.element:hover {
  transform: scale(1.2);
}
  • 使用硬件加速来启用GPU渲染 ：
.element {
  transform: translate3d(0, 0, 0);
}
  • 减少DOM操作 ：
// 避免使用 innerHTML
const element = document.getElementById('element');
element.textContent = 'New text';

// 避免使用 appendChild
const element = document.getElementById('element');
const newElement = document.createElement('div');
newElement.textContent = 'New element';
element.insertBefore(newElement, element.firstChild);

进一步阅读