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内存的操作系统)

我观察到的是,大多数时候,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/