高性能动画

CSS动画会比JS动画的性能更好,JS动画的优势主要在于

  • 更具定制性(毕竟JS比CSS更可编程);
  • 更易实现对低端浏览器的兼容。

当然,大部分业务中,主要还是使用CSS动画的,对低端浏览器进行降级就可以了(保证页面可读可操作就可以了,增加老旧设备的性能负担不是好事情)。

几个注意点:

  • 利用transform: translate3d(x, y, z);可借助3D变形开启GPU加速(这会消耗更多内存与功耗,确有性能问题时再考虑);
  • 若动画开始时有闪烁,可尝试:backface-visibility: hidden; perspective: 1000;
  • 尽可能少用box-shadows和gradients这两页面性能杀手;
  • CSS动画属性可能会触发整个页面的重排(reflow/relayout)、重绘(repaint)和重组(recomposite)。其中paint通常是最花费性能的,进可能避免使用触发paint的CSS动画属性。所以要尽可能通过修改translate代替修改top/left/bottom/right来实现动画效果,可以减少页面重绘(repaint),前者只触发页面的重组,而后者会额外触发页面的重排和重绘;
  • 尽量让动画元素脱离文档流(document flow)中,以减少重排(reflow);
  • 操作DOM的js语句能连着写尽量连着写,这样可借助浏览器的优化策略,将可触发重排的操作放于一个队列中,然后一次性进行一次重排;如果操作DOM的语句中间被其他诸如赋值语句之类的间断了,页面可能就会发生多次重排了。

Was this helpful?

0 / 0

发表评论 0

Your email address will not be published. Required fields are marked *