CSS vs JS动画:谁更快?---简单笔记

原创 2016年05月31日 22:29:11

参考文章

为什么基于 Javascript 的 DOM 动画库(比如 Velocity.js 和 GSAP)能够比 jQuery 和基于 CSS 的动画库更高效。

jQuery 动画

尽管 jQuery 异常强大,但是它的设计目标并不是一个高效的动画引擎

CSS 动画

CSS transition 的动画逻辑是由浏览器来执行,所以它的性能能够比 jQuery 动画好。它的优势体现在:

通过优化 DOM 操作,避免内存消耗来减少卡顿
使用与 RAF 类似的机制
强制使用硬件加速 (通过 GPU 来提高动画性能)

我的建议是:当你只在移动平台上开发,并且动画只是简单的状态切换,那么适合用纯 CSS transition。在这种情况下,transition 是高性能的原生支持方案。它可以让你将动画逻辑放在样式文件里面,而不会让你的页面充斥 Javascript 库。然而如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 app。那么我推荐你使用一个动画库,这样你的动画可以保持高效,并且你的工作流也更可控。有一个特别的库做的特别棒,它可以用 Javascript 控制 CSS transition。这就是 Transit。

Javascript 动画

所以 Javascript 可以比 CSS transition 性能更好。但是它到底有多块呢?它快到足够可以构建一个3D 动画的demo,通常需要用到 WebGL 才能完成。并且它快到足够搭建一个多媒体小动画,通常需要 Flash 或者 After Effects 才能完成。并且它还快到可以构建一个虚拟世界,通常需要 canvas 才能完成。

CSS vs JS动画:谁更快?

这篇文章翻译自 Julian Shapiro 的 CSS vs. JS Animation: Which is Faster?。Julian Shapiro 也是 Velocity.js 的创造者。这...
  • whs_321
  • whs_321
  • 2016年06月13日 15:21
  • 326

CSS动画 vs JS动画:谁更快?

重要申明:感谢翻译者——MZhou,想看翻译原文请戳这里!我只是个转载者!转载过程中有些翻译,我在看了英文原文之后,用了在我看来更为舒服的表达,望请勿怪!这篇文章翻译自 Julian Shapiro ...

CSS 和 JS 动画哪个会更快

基于Javascript的动画同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Java...
  • hj7jay
  • hj7jay
  • 2016年07月14日 11:08
  • 732

更快学习 JS 的 6 个简单思维技巧

当人们尝试学习 JavaScript , 或者其他编程技术的时候,常常会遇到同样的挑战: 有些概念容易混淆,特别是当你学习过其他语言的时候。 很难找到学习的时间(有时候是动力)...

css vs js动画及requestAnimationFrame优化动画

transitiontransition存在的问题: 只能设置动画的起始状态,不能设置中间状态 必须明确开始状态和结束状态的具体值,不能识别0到auto,none到block,background中U...

简单的CSS动画加JS实现转盘

Document .circle { background:#ccc; position: relative; height: 350px; width: 350px; d...

JS编程艺术笔记(4)-动画基础-简单的文字漂移

function positionMessage() { if (!document.getElementById) return false; if (!document.getElemen...

谷歌浏览器 VS 火狐量子:哪一个更快呢?

(点击上方蓝字,快速关注我们) 英文:mashable  译者:oschina  www.oschina.net/news/90739/firefox-quantum-vs...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS vs JS动画:谁更快?---简单笔记
举报原因:
原因补充:

(最多只允许输入30个字)