浏览器的重绘Repaints与重排Reflows深入分析

在浏览器中，每当改变了页面的布局、样式或者层级关系等，都会触发重排和重绘。重排和重绘是网站性能优化中非常重要的一个方面，因为它们会导致浏览器重新构建所有的元素并进行渲染，浪费了大量的时间和资源。因此，理解重排和重绘的原因和机制，对于优化网站性能非常重要。

何时触发重排和重绘

重排和重绘是在浏览器中进行的，不同浏览器的实现机制略有不同，但它们都有一些通用的触发条件。以下是触发重排和重绘的条件：

重排（reflow）

以下操作可能会触发重排：

• 改变窗口大小
• 添加、删除、修改DOM元素
• 改变元素的位置、大小、内容或样式
• 修改样式表
• 修改CSS伪类，如:hover等
• 滚动页面

重绘（repaint）

以下操作可能会触发重绘：

• 改变元素的背景色
• 改变元素的文字颜色
• 改变元素的文字阴影
• 改变元素的边框颜色、样式和宽度
• 改变元素的透明度
• 改变元素的图像等非背景图片

如何避免重排和重绘

因为重排和重绘会导致浪费大量的时间和资源，因此避免重排和重绘是优化网站性能的一个重要方面。以下是避免重排和重绘的一些具体做法：

• 避免频繁操作DOM和样式
• 在改变多个样式时，应仅对DOM进行一次修改
• 缓存DOM的尺寸和位置，避免重复计算
• 使用className替代style属性
• 批量修改元素的样式，可以考虑使用cssText属性或classList属性
• 将频繁变化的元素单独分离出来，放在独立图层中

示例

假设我们有以下的HTML结构：

<div>
  <span class="highlight">Hello</span>
  <span class="highlight">World</span>
</div>

我们想要将两个span元素的字体大小都设置为20px，首先我们可以这样写CSS：

.highlight {
  font-size: 20px;
}

这种写法虽然在功能上没有问题，但是却有一些潜在的性能问题。因为每个span元素在设置font-size的时候，都会导致浏览器重新计算整个布局，从而进行重排和重绘。因此，如果两个span元素非常多，这将会是非常低效的。

那么如何解决这个问题呢？一种简单的做法是将样式改写成下面这样：

.highlight {
  font-size: 20px;
}

div {
  font-size: 20px;
}

这样只需要将父元素的字体大小设置为20px即可。由于span元素继承了父元素的字体大小，因此不再需要单独设置每个span元素的字体大小，从而避免了重排和重绘的问题。

另外一个例子是，当需要对一个DOM元素进行一系列操作时，我们可以将这些操作合并为一个代码块，从而避免多次重排和重绘。例如：

let div = document.querySelector('div');

div.style.width = '100px';
div.style.height = '50px';
div.style.border = '1px solid black';

这里我们需要给一个div元素设置宽度、高度和边框样式。如果直接对这个元素进行多次修改，会导致多次重排和重绘。因此，我们可以将多次修改合并为一个代码块，如下所示：

let div = document.querySelector('div');

div.style.cssText = 'width: 100px; height: 50px; border: 1px solid black;';

使用cssText属性可以一次性修改多个样式，从而避免重排和重绘的问题。

结论

重排和重绘是影响网站性能的一个重要因素，因此需要我们在项目中引起足够的重视。在项目中，我们可以通过避免频繁操作DOM和样式、合并多次修改等方法来避免重排和重绘问题。同时，我们也需要对这些问题进行定位和分析，从而了解到底哪些代码会导致重排和重绘，以便我们更好地对性能进行优化。