CSS vs JS动画：谁更快？---简单笔记

参考文章

为什么基于 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 才能完成。