【web性能】重绘重排优化

历史哲学

第一戒：久利之事勿为，众争之地勿往。（容易获利的事情不要做，众人都想争的位置就不要去）
第二戒：勿以小恶弃人之大美，勿以小怨忘人之大恩。（不要因为小的缺点而忽视别人的大的优点，不要因为与人的小的怨愤而忘掉别人对你的大恩）
第三戒：说人之短乃护己之短，夸己之长乃忌人之长。（那些说别人缺点，夸自己优点的人，一方面是为了掩盖自己的缺点，另方面是嫉妒别人的优点，目的就在于贬损他人，抬高自己）
第四戒：利可共而不可独，谋可寡而不可众。（利益要共享而不能私吞，谋略要隐蔽而不可公之于众）
第五戒：天下古今之庸人，皆以一堕字致败，天下古今之才人，皆以一傲字致败。
第六戒：凡办大事，以识为主，以才为辅；凡成大事，人谋居半，天意居半。（凡事办大事，首先需要有深厚的阅历和见识，并以才能作为辅助；凡事要成就大事的，一半在于人的谋划，另一半就要看天意了，看时机会不会到来。所谓谋事在人，成事在天） ----《曾国藩六戒》

一、元素位置移动变化时尽量使用CSS3的transform来代替对top、left等操作

变换（transform）和透明度（opacity）的改变仅仅影响图层的组合

二、使用opacity来替代visibility

• 使用visibility不触发重排，但是依然重绘；
• 直接使用opacity既触发重绘，又出发重排（GPU底层设计如此）
• opacity配合图层使用，既不触发重绘也不触发重排

三、不要使用table布局

table-cell

四、将多次改变样式属性的操作合并成一次操作

不要一条一条地修改DOM的样式，预先定义好class，然后修改DOM的className

五、将DOM离线后再修改

由于display属性位none的元素不在渲染树中，对隐藏的元素操作不回引发其他元素的重排；
如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次。

六、利用文档碎片（documentFragment）

Vue 使用了该种方式提升性能

七、不要把获取某些DOM节点的属性值放在一个循环里当成循环的变量

当你请求向浏览器请求一些style信息的时候，就会让浏览器刷新队列，比如：

1. offsetTop、offsetLeft、offsetWidth、offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
   当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要刷新内部队列；
   因为队列中可能会有影响到这些值的操作。即使你获得元素的布局和样式信息跟最近发生或改变的布局信息，浏览器都会强行刷新渲染队列

八、动画实现过程中，启用GPU硬件（开启图层）加速：transform: translateZ(0)

九、为动画元素新建图层，提高动画元素的z-index