渲染阶段中的重绘和回流：哪一个更具影响力？

2024-01-29 10:57:04 前端笔记 109

重绘和回流：对渲染阶段的影响究竟是哪个？

在前端开发中，性能优化一直是一个重要的议题。其中，减少重绘（Repaint）和回流（Reflow）操作是提升页面性能的关键。然而，很多开发者对于重绘和回流的概念和影响并不清楚。本文将详细介绍重绘和回流的概念，以及它们对渲染阶段的影响，并通过具体的代码示例来说明。

首先，我们来理解重绘和回流的概念。重绘是指更改元素的外观，而不影响其布局属性的操作。比如改变背景颜色、字体颜色等。回流则是指改变元素的布局属性，例如改变元素的尺寸、位置等。当我们对DOM进行修改时，浏览器会执行重绘和回流操作来更新页面。

重绘和回流的频繁发生会导致性能的下降。首先，重绘和回流会触发渲染管道的重新执行，这会消耗一定的计算资源。其次，重绘和回流会导致页面重新绘制，可能会产生页面闪烁或卡顿的现象，给用户带来不好的体验。因此，减少重绘和回流操作对于提升页面性能和用户体验至关重要。

接下来，我们通过具体的代码示例来说明重绘和回流对渲染阶段的影响。假设我们有一个列表，其中的每个列表项都有一个class为item的样式，并且我们要改变每个列表项的背景颜色：


  列表项1
  
列表项2
  
列表项3
  列表项4

首先，我们使用JavaScript来改变列表项的背景颜色：

var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
    items[i].style.backgroundColor = 'red';
}

上述代码会导致浏览器执行重绘操作，在修改每个列表项的背景颜色时，只会改变元素的外观属性，不会影响元素的布局属性。

接下来，我们再来修改代码，将改变背景颜色的操作改为改变元素的尺寸：

var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
    items[i].style.width = '100px';
    items[i].style.height = '100px';
}

这段代码会触发回流操作，因为我们改变了元素的尺寸，会影响元素的布局属性。

从上述代码示例中可以看出，重绘和回流操作对渲染阶段的影响是不同的。重绘只会改变元素的外观属性，而回流会改变元素的布局属性。在实际开发中，我们应尽量避免频繁的重绘和回流操作，可以通过以下几种优化方法来减少性能损耗：

1.使用CSS的transform和animation等属性来实现动画效果，它们不会触发回流操作，性能更好。
2.通过批量修改DOM的方式，减少重绘和回流的次数。
3.使用DocumentFragment来减少DOM操作的次数，将多个DOM操作合并成一次。

起来，重绘和回流是影响页面性能的重要因素。开发者应该了解它们的概念和影响，合理优化代码，减少重绘和回流操作的发生，以提升页面性能和用户体验。

参考资料：

[Browser Rendering Optimization: How browsers work](developers.google/web/fundamentals/performance/rendering?hl=zh-cn#maintain-style-consistency)
[Understanding Repaint and Reflow in JavaScript](medium/reloading/javascript-start-up-performance-69200f43b201#.du2iynrih)