乐趣区

关于css3:CSS实现动画真的性能更好么由页面动画卡顿引发的思考

最近在优化页面动画成果时,和共事探讨到了页面动画卡顿的问题,即便大抵理解 CSS 实现的动画会比 JS 性能更佳,卡顿更少,然而始终没有深究这样的问题原理是什么。这次在优化过程中,发现即便应用 CSS 动画,然而在应用 height,width,margin,padding 作为 transition 的值的时候,仍然会卡顿,然而应用 CSS transform 就会有显著的改善。问题相似就不赘述了,在参考中附一个相似的问题。
这里次要讲一讲 CSS 到底哪些动画成果帧数高,性能好,背地的原理到底又是什么。

CSS 和 JS 怎么实现页面动画?

CSS 和 JS 都能够实现一些网页的动画成果,比方 CSS transitions/animations 和 JavaScript-based animations (using requestAnimationFrame())

CSS transitions 和 animations

CSS transitions 提供了一种简略的形式在现有款式和最终 CSS 状态之间实现动画成果。即便元素依然在变动过程中,新的 transition 会从当初的款式开始变动而不是间接跳到完结时的 CSS 状态。

CSS animations 容许开发者在一系列开始值和终止值之间设定动画,它蕴含两个局部,一种形容 CSS animation 的款式,以及定义多个关键帧以及每个关键帧中元素的属性值

requestAnimationFrame

requestAnimationFrame 通知浏览器——你心愿执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该办法须要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。
和 CSS transitions 和 animations 一样,requestAnimationFrame()在以后 Tab 被 push 到后盾时,也会暂停。

CSS 真的比 JS 实现的动画快么?

先说论断,不是的。
在大多数状况下,其实 CSS 和 JS 实现的动画性能其实都是差不太多的,甚至有些 JS 动画库声称他们的性能是要强过 CSS 原生动画的。这种状况之所以会产生,是因为 CSS transitions/animations 会在 repaint 事件产生前,在 UI 主过程中从新采集元素的款式。这和 requestAnimationFrame() callback 采纳的模式其实基本上一样。
所以如果 animations 是产生在主过程中,其实性能上并没什么卵差异的。

为啥 CSS animations 仍是更棒的抉择?

CSS animations 更棒的关键在于,只有咱们心愿设置动效的属性并没有触发 reflow/repaint 操作,咱们就能够将塑造元素的操作移除主过程。浏览器只须要一次生成这个元素的位图,并在动画开始的时候将它提交给 GPU 去解决,这就会显著晋升解决性能,尤其是在挪动设施上。之后,浏览器不须要再做任何布局、绘制以及提交位图的操作。从而,浏览器能够充分利用 GPU 的专长去疾速地将位图绘制在不同的地位、执行旋转或缩放解决。

Platform/GFX/OffMainThreadCompositing https://wiki.mozilla.org/Plat…

这其中,最常见的用法就是 CSS transform

在 CSS triggers(https://csstriggers.com/)
这张表里,咱们能够看到 transform 是不会在 Layout 和 Paint 层面作 trigger 的


当然,也能够发现目前 WebKit 内核在 CSS triggers 上和 Gecko 内核依然是有区别的,这也就不排除 IOS 和 Android 设施在挪动端的动画性能上,同样的实现形式依然会有体验上的差异。

参考:

  1. CSS and JavaScript animation performance https://developer.mozilla.org…
  2. CSS3 动画卡顿性能优化解决方案 https://segmentfault.com/a/11…
  3. Using CSS transitions https://developer.mozilla.org…
  4. Using CSS animations https://developer.mozilla.org…
退出移动版