web页面性能优化系列（2）页面重绘和回流

ゝ一纸荒年。 2022-04-08 16:30 319阅读 0赞

**浏览器渲染线程互斥的概念**  
问题：css渲染会影响js渲染性能嘛？  
答：会的，原因是在浏览器渲染过程渲染css和渲染js各开启一个线程去工作但是这两个线程是互斥的，当渲染css在工作，渲染js的线程将会停止工作，则如果页面css频繁进行重绘势必会降低js的渲染速度  
**回流的概念**  
当rander tree中的一部分或者全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建render tree 这个过程称为**回流**

例子：如页面布局，几何属性发生改变就会发生回流现象

**重绘的概念**  
当render tree 的一些元素需要更新属性，而这些属性之影响外观，风格，但不影响布局，比如：background-color: 这个重新渲染的过程叫做**重绘**

**重绘和回流的关系**  
回流必然会重绘，但重绘不一定会回流

**触发回流的css属性**

1、盒子模型相关的
    
    width
    height
    padding
    margin
    display
    border-width
    border
    min-height

2、定位属性以及浮动属性
    
    top
    bottom
    left
    right
    position
    float
    clear

3、改变节点内部文字结构
    test-algin
    overflow-y
    font-weight
    overflow
    font-family
    line-height
    vertival-align
    white-space
    font-size

**触发重绘的属性**

color
    border-style
    border-radius
    visibility
    text-decoration
    background
    background-image
    background-position
    background-repeat
    background-size
    outline-color
    outline
    outline-style
    outline-width
    box-shadow

**性能解决思路**  
既然在css角度上来看，我们依然知道这这些元素会触发回流和重绘，那么解决方案也就很清晰，也就是我们尽量去寻找替代这些元素的方案减少回流和重绘即可

**一个基础认识–新建DOM的过程**

1，获取dom后分割多个图层
    2，对图层节点计算样式结果(样式重计算)
    3，为每节点生成图形和认识(回流和重新布局)
    4，将每个节点绘制填充到图层位图中(重绘）
    5，图层作为纹理上传至GPU
    6，合并多个图层到页面上生成最终屏幕图象(图层重组)

**性能解决方案**  
`1，局限法：`将频繁重绘的DOM元素单独作为一个图层，则此DOM元素的重绘和回流的影响只局限在这个图层中

具体实现：

1，3D或者透视变换css属性  
2，使用加速视频解码的节点  
3，使用拥有3D(webGL)上下文或者2D上下文的节点  
4，混合插件（如flash）  
5，对自己opacity做css动画或者使用一个动画webkit变换的元素  
6，拥有加速cssg过滤器的元素  
7，元素拥有一个包含复合层的后代节点（即子元素在自己的层里面）  
8，元素有一个z-index较低且包含一个复合层的兄弟元素（即该元素在复合层上面渲染）

`2，替换法`：尽量避免使用触犯重绘回流的属性,替换

**1，用translate替代top ：前者不会触发回流**  
![在这里插入图片描述][20181219001734529.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 1]  
**2，用opacity替代visibility ：前者不会触发重绘（`前提:`独立图层否则整体回流重绘）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 2]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 3][]  
3，不要逐条修改DOM样式，预先定义好class，然后修改className  
4，先将DOM离线，即将DOM先display:none,此操作会触发一次回流，但避免了后面多此  
操作的反复回流，只会留一次，然后在其他修改完成情况下在现实出来  
5，不要将DOM节点的属性值放在循环里当成循环变量，`很要命`  
6，不要使用table布局，table布局可能因为很小的改动导致整体table重新布局  
7，对动画新建图层，如canvas，vedio等标签本身就是独立图层  
8，启用GPU加速，但是GPU如果处理的数据大需要和CPU进行频繁数据流动是个性能副  
作用

**性能查看**

Chrome自带perfomance

**性能消耗对比**

新建图层提高性能是相对看的，但是“滥用”图层或许图层合成对性能开销更大，所以合理利用并做性能比较，再决定是否用新建图层的方式避免重绘和回流

**图层查看**

Chrome自带Layers

…  
未完待续，如有错误，请留言指出！

[20181219001734529.png]: /images/20220404/09542ca817b74073a546e4bb019d3fd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70]: /images/20220404/6169f374ea6c4885855821d9daacdddc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 1]: /images/20220404/a9bc300ec0644514b2818e5f77e7903c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 2]: /images/20220404/3ac7aac8d04a4993bb99b1c4ba92ff5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 3]: /images/20220404/1903c6a002c44de69c99f57b0ed7bfaf.png