CSS（GPU）动画优化

reflow和repaint都是耗费浏览器性能的操作，这两者尤以reflow为甚；因为每次reflow，浏览器都要重新计算每个元素的形状和位置。

下面是一些针对reflow和repaint的最佳实践：

1. 不要一条一条地修改dom的样式，尽量使用className一次修改。
2. 将dom离线后修改
   使用documentFragment对象在内存里操作dom。
   先把dom节点display:none;（会触发一次reflow）。然后做大量的修改后，再把它显示出来。
   clone一个dom节点在内存里，修改之后；与在线的节点相替换。
3. 不要使用table布局，一个小改动会造成整个table的重新布局。
4. transform和opacity只会引起合成，不会引起布局和重绘。

浏览器将a元素提升为一个复合层有很多种原因，下面列举了一些：

1. 3d或透视变换css属性，例如translate3d,translateZ等等（js一般通过这种方式，使元素获得复合层）