css高性能动画

2018-08-04

浏览器渲染流程

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

  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加速,但是要适量,太多反而会降低性能,耗电
本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: javascript css3

评论

Loading...

最新评论

相关推荐

ts之类型谓词
在了解类型谓词之前,我们先来了解联合类型。 联合类型 日常开发中,我们会定义为一个支持多种类型的变量,比如一个变量可...
vscode自定义组件属性自动提示
在封装业务组件的时候,组件如果可以提供良好的属性提示,对开发的同事是一种很好的体验。 下面有两种方案可以实现属性文档提...
css sticky失效原因
css sticky定义 position:sticky 定义元素为粘性定位元素,根据正常文档流进行定位,然后相对它的...
scroll-top-icon