重绘和回流及其优化

ゝ一世哀愁。 2023-02-21 09:25 8阅读 0赞

重绘和回流是在浏览器内部发生的，所以在了解什么是重绘和回流之前，我们需要了解浏览器渲染页面的步骤，以此引出重绘和回流的概念。

> ### 浏览器渲染机制 ###

*  浏览器采用流式布局模型（`Flow Based Layout`）
 *  浏览器会把`HTML`解析成`DOM`，把`CSS`解析成`CSSOM`，`DOM`和`CSSOM`合并就产生了渲染树（`Render Tree`）。
 *  有了`RenderTree`，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
 *  由于浏览器使用流式布局，对`Render Tree`的计算通常只需要遍历一次就可以完成，**但`table`及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用`table`布局的原因之一**。

> ### 构建渲染树  ###

为了构建 `RenderTree 浏览器也是做了大量工作。`

1.  从DOM树的根节点开始遍历每个可见节点。
2.  对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。
3.  根据每个可见节点以及其对应的样式，组合生成渲染树。

第一步中，既然说到了要遍历可见的节点，那么我们得先知道，什么节点是不可见的。不可见的节点包括：

*  一些不会渲染输出的节点，比如script、meta、link等。
 *  一些通过css进行隐藏的节点。比如display:none。注意，利用visibility(规定元素是否可见)和opacity(元素透明度)隐藏的节点，还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。

从上面的例子来讲，我们可以看到span标签的样式有一个display:none，因此，它最终并没有在渲染树上。

**注意：渲染树只包含可见的节点**

> ### 回流 ###

回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。

前面我们通过构造渲染树，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。

之所以把回流放在重绘前面，是因为在页面第一次渲染的时候，是先回流的。

> ### 重绘  ###

由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘。

例如`outline`, `visibility`, `color`、`background-color`等，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性。

最终，我们通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点。

> ### 何时发生回流重绘 ###

我们前面知道了，回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。比如以下情况：

*  添加或删除可见的DOM元素
 *  元素的位置发生变化
 *  元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
 *  内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
 *  页面一开始渲染的时候（这肯定避免不了）
 *  浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

**注意：回流一定会触发重绘，而重绘不一定会回流**

根据改变的范围和程度，渲染树中或大或小的部分需要重新计算，有些改变会触发整个页面的重排，比如，滚动条出现的时候或者修改了根节点。

> ### 浏览器的优化机制 ###

现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！**当你获取布局信息的操作的时候，会强制队列刷新**，比如当你访问以下属性或者使用以下方法：

*  offsetTop、offsetLeft、offsetWidth、offsetHeight
 *  scrollTop、scrollLeft、scrollWidth、scrollHeight
 *  clientTop、clientLeft、clientWidth、clientHeight
 *  getComputedStyle()
 *  getBoundingClientRect
 *  具体可以访问这个网站：[https://gist.github.com/paulirish/5d52fb081b3570c81e3a][https_gist.github.com_paulirish_5d52fb081b3570c81e3a]

以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此，我们在修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列。如果要使用它们，最好将值缓存起来。

> ### 减少回流和重绘 ###

从css 和 js 两方面来处理这个问题

CSS：

*  使用 `transform` 替代 `top，left，实现定位布局`
 *  使用 `visibility` 替换 `display: none` ，因为前者只会引起重绘，后者会引发回流（改变了布局）
 *  避免使用`table`布局，可能很小的一个小改动会造成整个 `table` 的重新布局。
 *  对具有复杂动画的元素使用绝对定位( **`absolute`** )或固定定位 ( **fixed** )，使它脱离文档流，避免引起父元素及后续元素频繁回流。
 *  CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让`transform`、`opacity`、`filters`这些动画不会引起回流重绘 。但是对于动画的其它属性，比如`background-color`这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。

JavaScript

*  避免频繁操作样式，最好一次性重写`style`属性，或者将样式列表定义为`class`并一次性更改`class`属性。
 *      // 使用cssText
        const el = document.getElementById('test');
        el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';
        
        
        // 修改CSS的class
        const el = document.getElementById('test');
        el.className += ' active';
    
     
 *  避免频繁操作`DOM`，使元素脱离文档流，对其进行多次修改之后，将元素带回到文档中。但是实际上在元素脱离文档流和将元素放回到文档中的时候，还是会触发两次回流，脱离文档流之后，对其做的操作就不会触发回流了。

脱离文档流的方法有很多，但是其实最常用的还是隐藏元素这一种

1、隐藏元素，应用修改，重新显示

2、使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档。

3、将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。

*  避免频繁读取会引发回流/重绘的属性，例如上面提到的( offsetTop等属性 )如果确实需要多次使用，就用一个变量缓存起来。

[https_gist.github.com_paulirish_5d52fb081b3570c81e3a]: https://gist.github.com/paulirish/5d52fb081b3570c81e3a