重绘与重排

**

1.重绘

**
重绘是一个元素外观的改变所触发的浏览器行为。例如改变outline、背景色等属性，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观，重绘不会带来重新布局，所以不一定伴随重排。
需要注意的是：重绘是以图层为单位，如果图层中某个元素需要重绘，那么整个图层都需要重绘，例如一个图层包含很多节点，其中有个gif图，gif图的每一帧都会重绘整个图层的其他节点，最后生成最终的图层位图。所以这需要通过特殊方式来强制gif图属于自己的一个图层(translate(0)或者translate3d(0,0,0))
CSS3的动画也一样（好在绝大部分情况浏览器自己会为CSS3动画的节点创建图层）

**

2.重排（回流）

**
渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程叫做布局或重排
“重绘”不一定需要”重排”，比如改变某个网页元素的颜色，就只会触发”重绘”不会触发重排，因为布局没有改变，但是，”重排”必然导致”重绘”，比如改变一个网页元素的位置，就会同时触发”重排”和”重绘”，因为布局改变了。

3.触发重绘的属性

color border-style visibility outline….

**

4.触发重排的属性

**
盒子模型相关属性（width、padding、border、display等）、定位属性及浮动（top、bottom、position、float等）、改变节点内部文字结构(text-align,font-family,line-height等)

**

5.常见的触发重排的操作

**
重排的成本比重绘高得多。DOM Tree里的每个节点都会有重拍的方法。一个节点的重排很有可能导致子节点甚至父节点及同级结点的重排，在高新能的电脑上没什么，但是重排发生在手机里，这个过程是非常耗电的。
一下动作很有可能是高成本
①增删改DOM节点时，会导致重排重绘
②移动DOM位置时 ③修改CSS样式时
④resize窗口时（移动端不存在此问题，因为缩放不影响布局视口）
⑤获取某些属性时（width、height。。。）
特别注意：display:none会触发重排 visibility:hidden只会触发重绘，因为没有位置变化

**

6.优化方案

**
1.元素位置移动变换时尽量使用CSS3的transform来代替top、left等操作
变换(transform)和透明度(opacity)的改变仅仅影响图层的组合
2.使用opacity代替visibility
（1）使用visibility不触发重排，但是依然重绘
（2）直接使用opacity即触发重绘又触发重排
（3）opacity配合图层使用，既不重绘又不重排 开启图层 transform:transformZ()或者willchange:transform
3.不使用table布局
4.将多次改变合并为一次
5.将DOM离线再修改
6.利用documentFragment vue使用此方法提升性能 (H5提出来的)虚拟dom
7.不要把获取某些DOM节点的属性值放在一个循环里当作循环变量
8.动画实现过程中，启动GPU硬件加速：tranform:transformZ(0)
9.为动画元素新建图层，提高动画元素的z-index