css高性能动画

浏览器渲染流程

要优化动画性能，首先要了解浏览器是如何进行元素渲染的，浏览器的渲染流程有以下三步

1. 计算元素的样式（可能通过脚本重新计算）
2. 生成每个元素的几何形状和位置（布局）
3. 绘制图层的每个像素（初始化绘图并且进行绘图），将图层绘制到屏幕上（图层的合成）

举个例子，我们如果改变一个正常文档流的元素的width属性，由于元素之间的相互影响，就会导致文档树布局重新计算，排版和绘制

为了使动画更加流程，就要减少浏览器的绘制工作，简单的说就是减少重排、重绘

transform属性

transform属性可以向元素应用2D或者3D转换，可以对元素进行选择，缩放，移动和倾斜

2d变换一般使用的有translate，scale，rotate，skew，在前端的性能优化上，我们要避免浏览器做过多的重绘和重排，transform可以在一定程度上优化动画效果。

left/top vs transform

在日常中我们可以使用left/top或者transform来实现元素的位移，虽然效果是一样的，但是其实性能上还是有一定影响的，比如下面的例子

上面的例子使用left/top来实现元素的位移效果，经过chorme的性能分析，可以看出浏览器对该动画的处理大量使用GPU的计算，开启多个栅格化绘制线程绘制，复合层的合成来完成，界面明显看出卡顿。再看下面的例子

第二种使用transform来实现同样的效果，可以看出浏览器会单纯使用GPU加速来完成整个动画，性能大大提高，这是因为transform会创建一个新的渲染层来计算并应用元素的变化（trasnlate/scale/opacity）

实现动画注意事项

• 尽量使用css keyframes结合transform来实现
• 写js动画时，使用requestAnimationFrame，避免使用setTimeout和setInterval
• 避免直接修改元素的style属性来实现动画，例如jquery.animate，可以使用css，例如animate.css
• 使用translate来替代left/top，scale来替代width/height
• 使用translateZ(0)或者translate3d(0,0,0)来强制创建一个图层
• 移动端浏览器可以使用3d变换来开启gpu加速，但是要适量，太多反而会降低性能，耗电