浏览器解析和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一般通过这种方式，使元素获得复合层）
2. <video><iframe><canvas><webgl>等元素。
3. 混合插件（如flash）。
4. 元素自身的 opacity和transform 做 CSS 动画。
5. 拥有css过滤器的元素。
6. 使用will-change属性。
7. position:fixed。
8. 元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)
优化技巧
避免隐式合成
1. 保持动画的对象的z-index尽可能的高。理想的，这些元素应该是body元素的直接子元素。当然，这不是总可能的。所以你可以克隆一个元素，把它放在body元素下仅仅是为了做动画。
2. will-change属性使动画变得流畅，但不能滥用。否则导致内存溢出。动画结束后remove掉will-change。
动画中只使用transform和opacity
用css动画而不是js动画
1. 基于css的动画，不仅仅更快；也不会被大量的js计算所阻塞。
优化技巧总结
1. 减少浏览器的重排和重绘的发生。
2. 不要使用table布局。
3. css动画中尽量只使用transform和opacity，这不会发生重排和重绘。
4. 尽可能地只使用css做动画。
5. 避免浏览器的隐式合成。
6. 改变复合层的尺寸。