我的角度：降低 Web 性能的页面重绘和回流解析

精心规划的舞蹈：页面重绘和回流

在用户访问网页时，浏览器以一种无缝流畅的方式将内容呈现出来，背后却隐藏着许多复杂的计算。当网络传输的数据到达浏览器，并需要反映在屏幕上时，就会上演一场精心编排的舞蹈，页面重绘和回流正是其中不可或缺的两个动作。

页面重绘是指当页面上的某一部分发生改变时，浏览器重新绘制该部分的过程，就像一位技艺精湛的画家重新描绘画布上的部分图案。这种情况下，浏览器会将更新的内容发送给显卡，然后显卡将这些内容显示在屏幕上。

回流则是一种更为复杂的渲染过程。如果页面布局发生变化，例如元素的位置、大小或属性发生改变，浏览器需要重新计算整个页面的布局，然后重新绘制所有受影响的部分。就像一张精心设计的拼图，当一块拼图发生改变时，需要重新调整周围所有拼图的位置。

浏览器处理重绘和回流的幕后逻辑

为了了解重绘和回流的发生过程，我们先从浏览器解析HTML文档开始。浏览器读取HTML并构建一个名为“DOM树”的数据结构，该数据结构类似于一棵倒立的树，其中包含了页面上所有元素的详细信息。

同时，浏览器还会解析CSS样式表，生成一个称为“CSSOM”的数据结构，其中包含了所有CSS规则。然后，浏览器将DOM树和CSSOM结合起来，生成一个称为“渲染树”的数据结构，该结构了页面最终在屏幕上的布局。

当需要对页面进行重绘或回流时，浏览器首先根据渲染树计算元素的位置和大小。然后，浏览器将这些计算结果发送给显卡，显卡将这些内容绘制到屏幕上。

重绘和回流：哪里出错了

重绘和回流是页面渲染的必要步骤，但过多的重绘和回流会减慢页面的加载速度，导致卡顿和延迟。以下是一些常见的原因：

• 频繁的DOM操作 ：频繁地添加、删除或修改DOM元素，会导致频繁的重绘和回流。例如，频繁使用innerHTML或appendChild方法可能会导致性能问题。
• 不必要的CSS属性 ：使用不必要的CSS属性，例如过多的动画或过多的CSS选择器，也会导致过多的重绘和回流。
• 大型布局变化 ：对页面的布局进行大幅度的修改，例如改变元素的尺寸或位置，也会导致回流。
• 使用不兼容的浏览器 ：不同的浏览器对重绘和回流的处理方式不同，因此在某些浏览器中可能会遇到性能问题。

优化重绘和回流，提高页面性能

为了优化重绘和回流，提高页面性能，我们可以采取以下措施：

• 减少DOM操作 ：尽可能减少对DOM元素的添加、删除或修改操作。如果必须进行这些操作，尽量批量执行，以减少重绘和回流的次数。
• 优化CSS样式 ：避免使用不必要的CSS属性，例如过多的动画或过多的CSS选择器。尽量使用CSS预处理器，以减少CSS代码的大小和复杂度。
• 避免大的布局变化 ：尽量避免对页面的布局进行大幅度的修改。如果必须进行这些修改，尽量一次性完成，以避免多次回流。
• 使用兼容的浏览器 ：尽量使用兼容性较好的浏览器，以避免出现性能问题。

结论

页面重绘和回流是网页渲染的必要步骤，但过多的重绘和回流会减慢页面的加载速度，导致卡顿和延迟。通过减少DOM操作、优化CSS样式、避免大的布局变化以及使用兼容的浏览器，我们可以优化重绘和回流，提高页面性能，为用户提供更好的浏览体验。