前端性能优化3:重绘与回流

本文目录：

1.css性能是否会javascript的执行
2.触发页面重布局的属性
3.只触发重绘的属性
4.新建DOM的过程
5.如何将DOM元素变成新的独立图层
6.chrome页面分析工具
7.实战优化点总结

1.css性能是否会javascript的执行

确实会。
css代码的执行会阻塞页面的渲染，同时js的执行也会执行页面的渲染，当我们在js写一个死循环的时候，会页面渲染卡住。
但是浏览器有一个进程是负责Javascript解析，另外一个线程是负责UI渲染的
明明在不同的线程上，但是为什么会没法同时进行呢？
其实这是因为浏览器的执行原理。浏览器规定：UI线程和JavaScript线程是互斥的（因为js的进行往往依赖DOM，如果js的执行的同时伴随着DOM的改变，则会造成执行代码的逻辑混乱）
频繁的去改变css，触发回流与重绘，也就是UI线程频繁进行工作，必然会影响js的执行进程。

什么是回流
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)
当页面布局和几何属性改变时就需要回流

什么是重绘
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

回流必将引起重绘，而重绘不一定会引起回流

2.触发页面重布局的属性

盒子模型相关属性会触发重布局
width，height，padding，margin，display，border-width，border，min-height
定位属性及浮动也会触发重布局
top，bottom，left，right，position，float，clear
改变节点内部文字结构也会触发重布局
text-align，overflow-y，font-weight，overflow，font-family，line-height，vertival-align，white-space，font-size

3.只触发重绘的属性

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

4.新建DOM的过程

获取DOM后分割为多个图层
对每个图层的节点计算样式结果（Recalculate style--样式重计算）
为每个节点生成图形和位置（Layout--回流和重布局）
将每个节点绘制填充到图层位图中（Paint Setup和Paint--重绘）
图层作为纹理上传至GPU
符合多个图层到页面上生成最终屏幕图像（Composite Layers--图层重组）

将频繁重绘回流的DOM元素单独作为一个独立的图层，那么这个DOM元素的重绘和回流的影响只会在这个图层之中。
但是要注意：页面渲染的时候进行图层合并是非常消耗性能的，所以是否需要建立更多的图层需要根据实际情况来定。

5.如何将DOM元素变成新的独立图层

这涉及到相关的css属性，我们以chrome为例：
Chrome创建图层的条件

3D或透视变换（perspective transform）CSS属性
使用加速视频解码的<video>节点
拥有3D（WebGL）上下文或加速的2D上下文的<canvas>节点
混合插件（如Flash）
对自己的opacity做CSS动画或使用一个动画webkit变换的元素
拥有加速CSS过滤器的元素
元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）
gif格式的图片

6.chrome页面分析工具

Performance

Performance.png

方框1点击开始开始页面运行过程的录制，在运行弹窗中点击stop就可以停止
chrome会在这个界面详细展示录制过程中浏览器运行的所有细节。

详情界面.png

点击方框区域，可以自由选择想要详细查看和分析的时间段

layers.png

layers界面可以详细展示当前页面的所有图层

Remdering.png

勾选Paint flashing，接下来正常进行页面操作，浏览器会中当前尽心重绘的元素进行标绿。

标绿效果图.png

7.实战优化点总结

1. 用translate替代top改变（translate不会触发回流）
1. 用opacity替代visibility
1. 不要一条一条地修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
1. 把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来
1. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量，比如我们要去获取offsetHeight或者offsetWidth，而浏览器获取这两个属性都必须去触发回流，把这两个属性值放在循环中获取，会导致页面不断的回流
1. 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
1. 动画实现的速度的选择，过快的动画频率会导致页面一直处于回流状态，因为导致js执行阻塞
1. 对于动画新建图层，给对应的标签加上will-change:transform或者transform:translateZ(0)样式都可以将对应的元素变成一个独立的图层
1. 启用 GPU 硬件加速（translate3D就是应用GPU的运算能力），常规情况对元素添加上transform:translateZ(0)或者transform:translate3d(0,0,0)都可以让该元素的渲染启动GPU加速，但是使用GPU也有缺点：
  1.使用GPU可以节省CPU的渲染消耗，但是需要从CPU进行数据传输，这个传输的损耗和CPU自身直接进行计算的损耗需要进行平衡取舍
  2.启动GPU会在页面新建图层，而图层的建立与合并也都是需要消耗CPU的性能的

写在最后：
上述所讲的方法，尤其是新建图层与启用GPU，在项目完成之后一定要进行数据化严密测量再确定是否使用相关的优化。