CSS3动画和性能：有没有基准？

Question

每次我访问带有CSS3动画的页面时，我的笔记本都会变得嘈杂（给我一个信号，表明它在那里做了一些繁重的工作）。如果至少结果动画足够顺畅，我会不在乎自己。但他们不是。我得到的结果是我的2.4 GHz Core 2 Duo配备8GB内存和专用的NVIDIA GeForce 320M（不多，但对于某些css来说应该足够了，没有？......）有些生涩，随机闪烁，在某些情况下拥有奇怪的神器......“动画”，这通常比它的JS等同......

有人对JS与CSS动画进行过任何比较吗？或者为实际使用提出CSS3好东西的基准测试（例如，它们中有多少可以同时在页面上没有严重挂起等）？是否有任何最佳实践（例如 - 这样做，不要这样做，或者您的浏览器会抓取 - 等等）？

Answer 1

当CSS3不受支持时，我已经完成了一些CSS3过渡和Jquery .animate（）回退的项目。

除了我自己以外，我有三台测试计算机：

• 6年以上的笔记本电脑（运行XP，Athlon 1800+和768Mo的Ram）
• 3年笔记本电脑（运行Crappy Vista和带有2Go Ram的双核Intel CPU）
• 一个franken桌面（一些安装了P4和1Go ram的操作系统）

我观察到的是，大多数时候，CSS3表现更好。

我的意思是“表现更好”只是它“感觉更好”：我没有尝试对性能进行基准测试，也没有采用科学的测试方法，我的观察结果不应仅仅取决于经验感觉。另请注意，我主要使用CSS3过渡而不是CSS3动画（即使用关键帧）。

然而，“更好”并不意味着“总是好”。在较旧的计算机上，Javascript和CSS3同样是滞后的。如果您的站点是JS或CSS3重，那么在版本9之前的IE总是很糟糕的体验，在版本8之前的IE总是一个真正的噩梦。 v4之前的Firefox更好，但在旧计算机上并不完美。

在所有情况下，必须正确应用CSS3：例如，我发现将div淡化为不透明度：0而不设置显示：完成时无处理总是一个坏主意... CSS3过渡是相当新的，没有真正的最佳实践存在，这是现在的反复试验。

在现代移动设备上（我拥有一些IOS，Android和BBOS设备），CSS3总是比Javascript更好：在iPad 1上，一个简单的$（'img'）。fadeOut（）可能相当丑陋当CSS3过渡是干净的时候。

因此，总而言之，我的个人（和有限）经验告诉我们：

• css3通常比Js更好，特别是对于现代移动设备
• 虽然在过度使用时计算机/浏览器组合不佳都很糟糕
• 像往常一样，这取决于您的用户。如果他们拥有最先进的Macbook，您可以毫无顾虑地使用大量动画。如果装备很差，动画会严重妨碍他们的浏览体验。
• 我认为最好是使用Jquery后备进行CSS3过渡（如果不支持），并保持简单（即不能同时在三个不同元素上设置四个属性）

我希望它有所帮助。

Answer 2

CSS3在某些浏览器中使用GPU加速，这意味着如果你有一个很棒的GFX卡，将会产生流畅，快速的动画效果。 CSS / JQ使用你的记忆的地方。

所以我真的不认为可以进行基准测试比较。

关于您可以使用多少动画，浏览器频繁更新且硬件是一个因素，这样做“使用指南”将非常困难。

还没有看到任何JS：）

有关GPU加速的更多信息，请参阅：

http://www.html5rocks.com/en/tutorials/speed/html5/#toc-hardware-accell

但是有一些关于这个主题的好文章：

http://www.netmagazine.com/opinions/css3-vs-javascript

http://www.whatcreative.co.uk/blog/tips/the-benefits-of-css3-vs-jquery/

Answer 3

在某些项目的生产环境中使用css动画后，我不得不说这很痛苦。

我也使用TweenLite，这是我之前在Flash中使用过的最喜欢的动画库，并且已经为javascript和CSS重写了。

现在我对html5动画有足够的经验，我可以肯定地说TweenLite是最适合的工具。

我曾经为我的web开发人员使用css动画和过渡，并使用TweenLite作为旧浏览器的后备，但是当我将现代浏览器中的perf与CSS和TweenLite进行比较时，TweenLite版本几乎总是最流畅的。

由于开发人员写的这篇文章，我运行了这些测试：

http://www.greensock.com/transitions/

GSAP利用requestAnimationFrame并进行了超级优化。它具有css3等效性能，具有更好的api，用于测序，控制，回调......

选择问题！我做了我的。

Answer 4

这是新的（2012年12月起）Greensock：http://www.greensock.com/js/speed.html

您可以在jQuery，YUI，Zepto，Mootools，Dojo，TweenJS和GSAP等框架上对css3动画进行基准测试和比较javascript动画。