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

【问题标题】：CSS3 animations and performance: are there any benchmarks?CSS3 动画和性能：是否有任何基准？
【发布时间】：2011-12-13 13:32:45
【问题描述】：

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

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

【问题讨论】：

标签： performance css css-animations

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

我还使用 TweenLite，这是我以前在 Flash 中使用过很多次的我最喜欢的动画库，并且已经针对 javascript 和 CSS 进行了重写。

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

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

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

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

GSAP 利用requestAnimationFrame 并进行了超级优化。它具有与 css3 相当的性能和更好的 api 用于排序、控制、回调......

选择题！我自己做的。

【讨论】：

【解决方案3】：

当不支持 CSS3 时，我使用 CSS3 过渡和 Jquery .animate() 回退完成了一些项目。

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

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

我观察到，在大多数情况下，CSS3 表现更好。

我所说的“表现更好”只是“感觉更好”：我没有尝试对性能进行基准测试，也没有应用科学的测试方法，我的观察不应该只是一种经验感.另请注意，我主要使用 CSS3 过渡而不是 CSS3 动画（即使用关键帧）。

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

在所有情况下，必须正确应用 CSS3：例如，我发现将 div 淡化为 opacity: 0 而不设置 display:none 完成后总是一个坏主意... CSS3 过渡是相当新的，不存在真正的最佳实践，现在是反复试验。

在现代移动设备上（我拥有一些 IOS、Android 和 BBOS 设备），CSS3 总是比 Javascript 好得多：在 iPad 1 上，简单的 $('img').fadeOut() 可能非常难看当 CSS3 过渡干净时。

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

css3 通常比 Js 更好，尤其是对于现代移动设备
虽然在过度使用时，两者都对糟糕的计算机/浏览器组合不利
像往常一样，这取决于您的用户。如果他们有最先进的 Macbook，您可以毫无顾忌地使用大量动画。如果他们装备不佳，动画可能会严重影响他们的浏览体验。
我认为最好的方法是在不支持的情况下使用 Jquery 后备进行 CSS3 转换，并保持简单（即不要同时为三个不同元素的四个属性设置动画）

希望对你有帮助。

【讨论】：

【解决方案4】：

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/

【讨论】：

我怀疑某些 CSS3 动画在 GPU 上比 1999 年的任何 PC 游戏都“重”。与 10 年前游戏所需的疯狂事物相比，数学是超级简单的，所以实际上速度问题只是浏览器的 CSS-> GPU 实现。但我只是猜测。
是的。但我想这是关于浏览器应该能够远离设备的“功率”。想象一下浏览器应该像游戏一样使用你所有的 GPU，然后想想人们过度使用/滥用它。所以希望浏览器能更好地处理 GPU 的使用，但我猜想简单的淡入淡出/动画如此苛刻是有原因的。