Reflow和Repaint的基本认识和优化

我不是女神ヾ 2022-06-10 11:50 110阅读 0赞

**1. 什么的Repaint和Reflow**

浏览器解析大概的工作流程：

![Center][]

这张图应该很好理解，归纳为四个步骤：

1)  解析HTML以构建**DOM树**：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为——内容树；

2)  **构建渲染树**：解析CSS（包括外部CSS文件和样式元素以及JS生成的样式），根据CSS选择器计算出节点的样式，创建另一个树——渲染树；

3)  **布局****渲染树**：从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标；

4)  **绘制渲染树**：遍历渲染树，每个节点将使用UI后端层来绘制。

对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。  
可见这两个东东对浏览器渲染页面是很重要的啊，都是会影响性能的，因此我们需要了解一些常见的会引起repaint和reflow的一些操作，并且应该尽量减少以提高渲染速度。

**2. 引起Repaint和Reflow的一些操作**

Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么，但是如果 reflow 发生在手机上，那么这个过程是非常痛苦和耗电的。  
所以，下面这些动作有很大可能会是成本比较高的。  
  
1）当你增加、删除、修改 DOM 结点时，会导致 Reflow 或 Repaint。  
2）当你移动 DOM 的位置，或是搞个动画的时候。  
3）当你修改 CSS 样式的时候。  
4）当你 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。  
5）当你修改网页的字体颜色时（只有repaint，因为不需要调整布局）。

6）当你读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Lfet...、getComputedStyle()、currentStyle()）

注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。

**3. 如何优化**

Reflow是不可避免的，只能将Reflow对性能的影响减到最小,给出下面几条建议：

1）不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className：

2）把 DOM 离线后修改。如：

a> 使用 documentFragment 对象在内存里操作 DOM。  
b> 先把 DOM 给 **display:none** (有一次 repaint)，然后你想怎么改就怎么改。比如修改 100 次，然后再把他显示出来。  
c> **clone** 一个 DOM 节点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。

3）不要把 DOM 节点的属性值放在一个循环里当成**循环里的变量**。不然这会导致大量地读写这个结点的属性。

4）尽可能的**修改层级比较低的 DOM节点**。当然，改变层级比较底的 DOM节点有可能会造成大面积的 reflow，但是也可能影响范围很小。

5）为**动画的** HTML 元件使用 **fixed 或 absoult** 的 position，那么修改他们的 CSS 是会大大减小 reflow 。

6）千万**不要使用 table 布局**。因为可能很小的一个小改动会造成整个 table 的重新布局。

[Center]: /images/20220610/24380eb1d5bd48368e85fb3459bc9482.png