前端性能优化-（一）重绘与回流

重绘是一个元素外观的改变所触发的浏览器行为。

渲染对象在建立完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排

优化方案：

1.元素位置移动变换时尽可能使用CSS3的transform来代替对top left等的操做
变换（transform）和透明度（opacity）的改变仅仅影响图层的组合
2.使用opacity来代替visibility
(1).使用visibility不触发重排，可是依然重绘。
(2).直接使用opacity即触发重绘，又触发重排（GPU底层设计如此！）。
(3).opacity配合图层使用，即不触发重绘也不触发重排。
缘由：
透明度的改变时，GPU在绘画时只是简单的下降以前已经画好的纹理的alpha值来达到效果，并不须要总体的重绘。
不过这个前提是这个被修改opacity自己必须是一个图层。
3.不要使用table布局
table-cell
4.将屡次改变样式属性的操做合并成一次操做
不要一条一条地修改DOM的样式，预先定义好class，而后修改DOM的className
5.将DOM离线后再修改
因为display属性为none的元素不在渲染树中，对隐藏的元素操做不会引起其余元素的重排。
若是要对一个元素进行复杂的操做时，能够先隐藏它，操做完成后再显示。这样只在隐藏和显示时触发2次重排。
6.利用文档碎片(documentFragment)------vue使用了该种方式提高性能。
7.不要把获取某些DOM节点的属性值放在一个循环里当成循环的变量
当你请求向浏览器请求一些 style信息的时候，就会让浏览器flush队列，好比：
1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. width,height
当你请求上面的一些属性的时候，浏览器为了给你最精确的值，须要刷新内部队列，
由于队列中可能会有影响到这些值的操做。即便你获取元素的布局和样式信息跟最近发生或改变的布局信息无关，
浏览器都会强行刷新渲染队列。
8.动画实现过程当中，启用GPU硬件加速:transform: tranlateZ(0)
9.为动画元素新建图层,提升动画元素的z-index