2024-9-18 如何避免重绘或者重排？

[iolh]

参考资料：

1. https://www.explainthis.io/en/swe/repaint-and-reflow
2. https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg
3. https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path
4. https://developers.google.com/speed/docs/insights/browser-reflow?hl=zh-cn
5. https://weijunext.medium.com/performance-optimization-thoroughly-understanding-and-deconstructing-reflow-repaint-and-d5d9118f2cdf

[iolh]

重排

重排是浏览器重新计算页面上元素的大小和位置的过程

当页面元素布局位置变化，例如添加、删除、更新节点，或者几何属性更新，例如 width、height、font-size，浏览器会执行重排，并且可能会因为某个节点布局变化触发整个页面的重排。频繁的重排可能会导致页面卡顿和响应时间增加。

重绘

重绘是浏览器在页面上重新绘制元素的过程

当页面上的元素更改视觉效果时，浏览器将执行重绘，例如 outline、visibility,、color、background-color。

浏览器渲染路径

1. 解析 HTML 和样式计算

浏览器将 HTML 解析为 DOM，将 CSS 解析为 CSSOM，并将 DOM 和 CSSOM 合并到渲染树中，渲染树具有 DOM 的结构和每个节点的样式。

2. Layout

浏览器还需要计算屏幕上每个节点的大小和位置。此过程称为布局，并生成布局树。

3. Paint

浏览器仍然需要确定元素绘制操作的先后顺序。

4. Compositing

经过前三个步骤后，浏览器已经获取到了渲染页面所需的信息，但为了提高整体的渲染效率，浏览器会通过合成的方式将信息合成并渲染到屏幕上。合成是一种将页面划分为多个图层（layers）的技术，该技术将在称为合成器线程的单独线程上执行。完成此过程后，将生成一个图层树，最后渲染到屏幕上。

减少重排和重绘

浏览器渲染过程的最后一个过程是合成，在某些情况下，我们可以使用一些技巧，让浏览器只进行合成，避免 Reflow 和 Repaint。

• 使用 transform 移动和调整元素
• 使用 opacity 更改元素的可见性
• 如果需要频繁地重绘或重排节点，可以通过 will-change 将其设置为单独的层，因为单独的层可以避免此节点的渲染行为影响其他节点。
• 通过改变class的方式来集中改变样式。
• 避免使用 JavaScript 进行频繁的 DOM 操作。通过createDocumentFragment创建一个游离于DOM树之外的节点，然后在此节点上批量操作，最后插入DOM树中，只触发一次重排。