有人对JS与CSS动画进行了比较吗?或者对于实际使用提出的CSS3好处进行基准测试(例如,在没有严重挂起的情况下页面上可以同时使用多少个)?是否有最佳实践(例如-这样做,不要这样做,否则您的浏览器将变得缓慢-等)?
我曾经使用CSS3过渡效果和Jquery .animate()回退功能的几个项目。
除了我的电脑以外,我还有三台测试电脑:
我观察到大部分情况下,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过渡效果却很流畅。
因此,总之,我的个人(有限的)经验告诉我:
希望对您有所帮助。
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/
以下是2012年12月份开始推出的新技术,由Greensock提供:http://www.greensock.com/js/speed.html
您可以在jQuery、YUI、Zepto、Mootools、Dojo、TweenJS和GSAP等框架上对比和测试CSS3动画和JavaScript动画。
http://www.greensock.com/transitions/
GSAP利用requestAnimationFrame,具有超级优化的性能。它具有与CSS3相当的性能,但在顺序控制、控制和回调方面具有更好的API。