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,避免使用setTimeoutsetInterval
  • 避免直接修改元素的style属性来实现动画,例如jquery.animate,可以使用css,例如animate.css
  • 使用translate来替代left/top,scale来替代width/height
  • 使用translateZ(0)或者translate3d(0,0,0)来强制创建一个图层
  • 移动端浏览器可以使用3d变换来开启gpu加速,但是要适量,太多反而会降低性能,耗电
标签: javascript css3

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论