共计 1734 个字符，预计需要花费 5 分钟才能阅读完成。
最近在优化页面动画成果时，和共事探讨到了页面动画卡顿的问题，即便大抵理解 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 设施在挪动端的动画性能上，同样的实现形式依然会有体验上的差异。
参考：
- CSS and JavaScript animation performance https://developer.mozilla.org…
- CSS3 动画卡顿性能优化解决方案 https://segmentfault.com/a/11…
- Using CSS transitions https://developer.mozilla.org…
- Using CSS animations https://developer.mozilla.org…
