重绘和回流 | GDYG Blog

type

status

date

slug

summary

📝 介绍

重绘（Repaint）和回流（Reflow）是浏览器渲染页面时的两个重要概念，它们都与页面元素的布局和样式相关，但有着不同的影响和表现。

回流是指当页面布局和几何属性发生变化时，浏览器需要重新计算元素的位置和大小，然后重新渲染页面的过程。回流会影响到页面中的所有元素，因为它可能会导致整个文档的布局发生变化，而不仅仅是单个元素。

触发回流的原因包括但不限于：

回流是一种比较昂贵的操作，因为它涉及到重新计算整个页面的布局，可能会引起页面的重新渲染，从而影响页面的性能。

重绘是指当元素的样式发生变化，但布局没有发生变化时，浏览器需要重新绘制元素的过程。重绘不会改变元素的位置和大小，只会更新元素的视觉效果。

触发重绘的原因包括但不限于：

重绘相比于回流来说开销较小，因为它只涉及到更新元素的视觉效果，不会影响到整个页面的布局。

回流和重绘都是浏览器在渲染页面时的重要步骤，它们的频繁发生会影响页面的性能和用户体验。为了优化页面的渲染性能，可以尽量减少回流和重绘的次数，避免在DOM操作和样式修改中频繁触发回流和重绘。可以通过以下方法来优化页面渲染性能：

Q: 怎么合并多个DOM操作呢？

合并多个DOM操作是为了减少触发回流和重绘的次数，从而提高页面的性能。通过合并多个DOM操作，可以将多个操作合并为一次操作，从而减少浏览器对页面的重新布局和绘制。

下面是一些合并多个DOM操作的常见方法：

使用文档片段（DocumentFragment）：文档片段是一种虚拟的DOM节点容器，可以在其中进行DOM操作，然后一次性将其添加到文档中。通过使用文档片段，可以避免每次操作都触发回流和重绘。

通过合并多个DOM操作，可以最大限度地减少浏览器对页面的重新布局和绘制，提高页面的性能和用户体验。

Q: 如何利用 GPU 加速减少重绘次数？

GPU加速可以帮助浏览器更快地渲染页面，从而减少重绘的次数。一般来说，使用CSS3的transform和opacity属性可以触发GPU加速。这是因为这些属性的变化不会影响页面的布局，只会改变元素的视觉效果，所以浏览器可以将这些操作交给GPU来处理，从而减少CPU的负载，提高渲染效率。

例如，以下的CSS动画就使用了GPU加速：

在这个例子中，当鼠标悬停在.element上时，它的大小（通过transform属性）和透明度（通过opacity属性）会发生变化。这些变化都是由GPU来处理的，所以不会触发浏览器的回流或重绘，从而提高了页面的性能。

Q: CSS3 的 transform 和 opacity 属性不就改变的元素的样式了吗？为什么不是重绘呢？

在CSS和渲染引擎中，"重绘"和"重排"是两个不同的概念：

重排（Reflow）：重排是指当元素的大小、位置、布局等属性发生变化时，浏览器需要重新计算元素的几何属性和页面的布局，并重新渲染整个文档流的过程。重排是一种较为昂贵的操作，因为它涉及到重新计算整个页面的布局，可能会导致页面的重新绘制。

重绘（Repaint）：重绘是指当元素的样式属性发生变化，但布局不发生变化时，浏览器只需要重新绘制受影响的元素的视觉效果，而不需要重新计算布局和重新渲染页面的过程。重绘的开销相比于重排来说较小，因为它只涉及到更新元素的视觉效果，而不涉及到页面的重新布局。

当我们使用CSS3的transform和opacity属性时，实际上发生的是重绘，而不是重排。因为transform和opacity属性只影响元素的视觉表现，而不影响其布局。虽然元素的外观发生了变化，但它仅仅是一个视觉效果的变化，不会导致浏览器重新计算布局和重新渲染整个页面。

因此，当我们使用transform和opacity属性时，浏览器只需要重新绘制受影响的元素的视觉效果，而不需要重新计算布局和重新渲染整个页面，因此这被归类为重绘而不是重排。