关闭

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

2657人阅读 评论(0) 收藏 举报
分类:

参考文章

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

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30581次
    • 积分:1051
    • 等级:
    • 排名:千里之外
    • 原创:77篇
    • 转载:4篇
    • 译文:0篇
    • 评论:2条
    文章分类