Unlocking the Secrets of Browser Rendering: Repaints vs. Reflows

前端

2024-02-26 22:31:35

在网页开发的领域中，性能优化占据着至关重要的地位。要打造加载速度快、用户体验流畅的网站，深入理解浏览器渲染的内部机制至关重要。而在这个过程中，重绘（Repaints）和回流（Reflows）是两个需要我们重点掌握的概念。

重绘与回流：概念辨析

重绘： 可以简单理解为屏幕上像素的更新，它并不会改变页面布局或结构。当我们修改元素的视觉外观，例如颜色、背景或透明度时，通常会触发重绘。
回流： 相比之下，回流则是一个更重量级的事件，它会重新排列页面上元素的布局。当我们进行一些影响元素结构或位置的操作，例如调整大小、添加/删除内容或修改外边距/内边距时，就会触发回流。

重绘与回流：相互影响

重绘和回流之间存在着密切的联系：

重绘可能引发回流： 如果重绘操作影响了元素的几何形状，浏览器可能需要进行回流来重新调整布局。
回流必然导致重绘： 回流改变了布局，浏览器自然需要重新绘制受影响的区域来显示更新后的内容。

优化策略：提升网页性能

减少重绘和回流的次数是提升网页性能的关键。以下是一些行之有效的优化策略：

优化 CSS 选择器： 使用精准的 CSS 选择器，避免不必要的计算。例如，尽量使用类选择器或 ID 选择器，而不是标签选择器或通配符选择器。
避免不必要的布局更改： 尽量减少对页面元素进行动态调整，尤其是在页面加载完成后。如果必须进行调整，可以考虑使用 CSS3 动画或过渡效果，这些效果通常由 GPU 处理，可以有效减少回流的次数。
缓存元素尺寸： 预先计算并缓存元素的尺寸信息，可以避免因布局变化而引发的回流。例如，可以使用 offsetWidth 和 offsetHeight 属性获取元素的宽度和高度，并将这些值存储在变量中，以便后续使用。
利用硬件加速： CSS3 的 transform 和 animation 属性可以利用 GPU 进行渲染，从而获得更流畅的动画效果，并减少回流和重绘的次数。
减少 JavaScript 对 DOM 的操作： 过多的 DOM 操作会导致大量的重绘和回流。我们可以使用一些技巧来减少 DOM 操作的次数，例如使用文档片段（DocumentFragment）批量更新 DOM，或者使用虚拟 DOM 技术。

常见问题解答

如何判断页面是否发生了重绘或回流？

可以使用 Chrome 浏览器的开发者工具来监控页面性能。在 "Performance" 面板中，可以查看页面加载过程中的重绘和回流事件。
哪些 CSS 属性会触发回流？

很多 CSS 属性都会触发回流，例如 width、height、margin、padding、position、float、display 等。
哪些 JavaScript 操作会触发回流？

一些常见的 JavaScript 操作会触发回流，例如：
- 获取元素的尺寸信息，例如 offsetWidth、offsetHeight、clientWidth、clientHeight 等。
- 修改元素的样式，例如 element.style.width = '100px'。
- 添加、删除或移动 DOM 元素。

如何避免使用 offsetWidth 和 offsetHeight 触发回流？

可以将 offsetWidth 和 offsetHeight 的值缓存起来，避免重复读取。例如：

const elementWidth = element.offsetWidth;
const elementHeight = element.offsetHeight;
// 后续使用 elementWidth 和 elementHeight，而不是再次读取 offsetWidth 和 offsetHeight