CSS（GPU）动画优化

浏览器在渲染时会将dom tree 分类多个图层，每个图层独立进行reflow、repaint，然后展现在屏幕上。
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一般通过这种方式，使元素获得复合层）
2. <video><iframe><canvas><webgl>等元素。
3. 混合插件（如flash）。
4. 元素自身的 opacity和transform 做 CSS 动画。
5. 拥有c