原创作者 ：于雪@招聘FE 58招聘技术团队
如何让你的动画更流畅呢？在你熟悉CSS之前，你应该了解一下浏览器如何渲染。（本文只是对合成层的一个探讨，不对帧动画优化以及requestAnimationFrame优化方面进行探讨。）
浏览器渲染过程简单介绍
浏览器的大致过程是先生成DOM tree，每一个HTML标签在DOM Tree中都有一个对应的HTMLElement节点，每个HTMLElement节点生成相应的Render Object，具有相同坐标空间的Render Object都绘制在同一个Render Layer中，这些render layer形成一个render layer tree，同时生成Graphics Layer，这些Graphics Layer形成一个Graphics Layer Tree（可看作是一个图形缓冲区被若干Render Layer共用，即Composited Layer合成层）。然后GPU栅格化渲染到我们的屏幕。
composited layer（合成层简单介绍）
现代浏览器一般采用Layer Compositing渲染机制，避免不必要的重绘，和利用硬件加速实现UI特性。
如果是一个normal flow的页面，浏览器会按照网页元素的绘制是按照Render Object Tree的先序遍历顺序进行渲染，也就是他的一个整体就是一个复合层。
在chrome开发者工具上rendering选择『Show composited layer borders』后，就能看到我们的页面有黄色的边框圈起来的，他就表示一个合成层。
蓝色的线是浏览器GUP按照栅格化渲染时候的区域。
什么样的元素才能创建自己composited layer呢？至少要符合以下条件之一：
- Layer has 3D or perspective transform CSS properties(有3D元素的属性)
- Layer is used by video element using accelerated video decoding(video标签并使用加速视频解码)
- Layer is used by a canvas element with a 3D context or accelerated 2D context(canvas元素并启用3D)
- Layer is used for a composited plugin(插件，比如flash)
- Layer uses a CSS animation for its opacity or uses an animated webkit transform(CSS动画)
- Layer uses accelerated CSS filters(CSS滤镜)
- Layer with a composited descendant has information that needs to be in the composited layer tree, such as a clip or reflection(有一个后代元素是独立的layer)
- Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer)(元素有一个z-index较低且包含一个复合层的兄弟元素)
使用合成层对我们有什么影响呢
我们先看一个demo，页面上我有一个应用了translate3d动画标题，后面有一个3000个list（比较极端），然后我们看下页面的合成层，很多个合成层。
看到第一眼，脑袋里面已经有n多个！。如果我要滚动呢？电脑上都有卡顿，更何况在手机上呢！
由于标题设置了3D属性，浏览器会启发式算法的导致下面的列表也被变成合成层（也就是上面所列条件的最后一条）。
我们看下他的性能,耗时居然200多ms
我们为标题或者列表添加position:relative,z-index:10;就能解决
我们在看一个例子，简单的一个位移动画，下图我们只是做了一个left的位移动画，但是他并没有生成GraphicsLayers，从而不能使用GPU加速。在手机上我们采用这种方式的动画，经常会发现卡顿的现象。
我们例子进行下修改，使用transform做位移动画，可以看到生成了GraphicsLayers，启用了GPU加速。在手机上观看的时候，会发现动画很流畅。
最后
手机硬件参差不齐，我们在做动画的时候，经常会碰见卡顿的现象，很多时候是我们没有使用GPU进行加速渲染。虽然利用composited layer我们能启用GPU加速渲染页面，提升页面的性能，但是我们也应该注意，不能滥用合成层，以免给我们带来性能的问题。那我们如何进行优化呢？
paint优化
- 将动画放在独立的GraphicsLay
ers,利用GPU层缓存，资源重复利用。
- 不要有存在太多GraphicsLayers，占用内存
- 注意启发式算法引起的GraphicsLayers过多问题
- 利用浏览器的合成加速，特殊动画直接跳过布局，绘制过程，但需要注意避免层过多占用内存
- 单独使用sacle，translate2D并不会独立产生GraphicsLayers，translate2D+css transition可以在GPU中产生一次临时的层进行计算
Reference
http://blog.csdn.net/luoshengyang/article/details/50661553
http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/
https://www.w3.org/TR/CSS21/visuren.html
文章选自微信公众号：zhaopinteam_58
如果您有什么意见想法或者想看到更多干货，欢迎关注公众号：zhaopinteam_58