CSS3动画和性能：是否有任何基准？

Question

每当我访问一个有CSS3动画的页面时，我的笔记本电脑就会变得嘈杂（提示我它在做一些重负载的工作）。如果至少结果动画足够平滑，那我自己毫不在意。但事实并非如此。在我的2.4 GHz Core 2 Duo，8GB RAM和专用的NVIDIA GeForce 320M上，所得到的是一些卡顿、随机闪烁、在某些情况下具有奇怪伪像的“动画”，这通常比它的JS等效物更糟糕...
有人对JS与CSS动画进行了比较吗？或者对于实际使用提出的CSS3好处进行基准测试（例如，在没有严重挂起的情况下页面上可以同时使用多少个）？是否有最佳实践（例如-这样做，不要这样做，否则您的浏览器将变得缓慢-等）？

- jayarjo

Answer 1

我曾经使用CSS3过渡效果和Jquery .animate()回退功能的几个项目。

除了我的电脑以外，我还有三台测试电脑:

• 一台运行XP、Athlon 1800+和768Mo内存的6年以上的笔记本电脑
• 一台运行糟糕的Vista和双核Intel CPU以及2Go内存的3年以上的笔记本电脑
• 一台拥有多个操作系统、P4和1Go内存的Franken桌面电脑

我观察到大部分情况下，CSS3表现更好。

所谓“表现更好”，只是指“感觉更好”：我没有尝试基准测试性能，也没有应用科学的测试方法，我的观察结果不应该被视为超越经验主义。此外，请注意我主要使用CSS3过渡效果而不是CSS3动画（例如带关键帧的动画）。

然而，“更好”并不意味着总是“很好”。在旧电脑上，Javascript和CSS3同样会出现卡顿。如果您的网站非常依赖JS或CSS3，则IE 9之前的版本始终是一种糟糕的体验，IE 8之前的版本则始终是一种真正的噩梦。Firefox 4之前在旧电脑上表现更好，但仍然远非完美。

在所有情况下，必须正确应用CSS3：例如，我发现将div淡出到opacity:0而不在完成后设置display:none一直是一个不好的主意... CSS3过渡效果相当新，没有真正的最佳实践，现在还是试错。

在现代移动设备上（我拥有几台IOS、Android和BBOS设备），CSS3始终比Javascript好得多：在iPad 1上，一个简单的$('img').fadeOut()可能会非常丑陋，而CSS3过渡效果却很流畅。

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

• CSS3通常比JS更好，尤其是对于现代移动设备来说
• 如果过度使用，两者在较差的计算机/浏览器组合上都很差

通常情况下，这取决于您的用户。如果他们拥有最先进的Macbook，您可以大量使用动画而不用担心。如果他们设备性能差，动画可能会严重影响他们的浏览体验。

我认为最好的方法是使用CSS3过渡效果，如果不支持，则使用Jquery回退，并保持简单（即不要同时在三个不同元素上同时动画四个属性）

希望对您有所帮助。

- mddw

Answer 2

CSS3在一些浏览器中使用GPU加速，这意味着如果您拥有出色的图形卡，将会得到流畅、快速的动画效果。而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/

- Marco Johannesen

---

我怀疑有些 CSS3 动画对 GPU 的负荷比 1999 年的任何电脑游戏都要重。与 10 年前游戏所需的疯狂要求相比，数学运算非常简单，因此速度问题实际上只是浏览器在 CSS->GPU 实现方面的问题。但这只是我的猜测。 - vsync

是的。但我想这与浏览器应该从设备中获取多少“功率”有关。想象一下，如果浏览器像游戏一样使用您的GPU，那么考虑一下人们过度使用/滥用它的情况。因此，希望浏览器在处理GPU使用方面变得更好，但我猜测简单的淡入淡出/动画如此耗费资源也有其原因。 - Marco Johannesen

Answer 3

以下是2012年12月份开始推出的新技术，由Greensock提供：http://www.greensock.com/js/speed.html

您可以在jQuery、YUI、Zepto、Mootools、Dojo、TweenJS和GSAP等框架上对比和测试CSS3动画和JavaScript动画。

- pilau

Answer 4

在一些项目的生产环境中使用CSS动画后，我不得不说这真是个大麻烦。我也使用TweenLite，这是我之前在Flash中经常使用的最喜欢的动画库，现已重写为JavaScript和CSS。现在我对HTML5动画有足够的经验，可以确定TweenLite是最适合的工具。我曾经为我的Web开发使用CSS动画和过渡，并将TweenLite作为旧浏览器的后备方案，但是当我在现代浏览器中比较CSS和TweenLite的性能时，TweenLite版本几乎总是最流畅的。我进行了这些测试，因为开发者刚刚发布了这篇文章。

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

GSAP利用requestAnimationFrame，具有超级优化的性能。它具有与CSS3相当的性能，但在顺序控制、控制和回调方面具有更好的API。

这是一个选择问题！我已经做出了我的选择。

- Armel Larcier