CSS 和 JS 动画哪个更快

  基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢?

  本文逐一遍览了基于Javascript的DOM动画库,如Velocity.js和GSAP,看其是如何比jQuery和CSS动画效果更具性能的.

 jQuery

  让我们先从基础的开始: JavaScript 和 jQuery 被错误的混为一谈了. JavaScript 动画是很快的. jQuery 把它放慢了下来。为什么?因为 — 尽管jQuery非常强大 — 但成为一个性能强劲的动画引擎从来都不是jQuery的设计目标:

  应该注意到布局颠簸就是在动画开始部分的不顺畅,垃圾回收就是造成动画期间不顺畅的元凶, 而没有使用RAF则会导致低帧率.

 实现示例

  避免造成布局颠簸的DOM查询和更新组合:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

var currentTop,

    currentLeft;

/* With layout thrashing. */

currentTop = element.style.top; /* QUERY */

element.style.top = currentTop + 1; /* UPDATE */

currentLeft = element.style.left; /* QUERY */

element.style.left = currentLeft + 1; /* UPDATE */

/* Without layout thrashing. */

currentTop = element.style.top; /* QUERY */

currentLeft = element.style.left; /* QUERY */

element.style.top = currentTop + 1; /* UPDATE */

element.style.left = currentLeft + 1; /* UPDATE */

  发生在更新之后的查询会强制浏览器对页面的计算式数据进行重新计算 (同时会把新的更新效果考虑在内). 这样就会对动画产生显著的开销,而这只是16毫秒微小间隔的运行超时.

  类似的,实现 RAF 并不必须是对你的现有代码库的显著返工. 让我们拿RAF的基础实现同setInterval比较一下:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

var startingTop = 0;

/* setInterval: Runs every 16ms to achieve 60fps (1000ms/60 ~= 16ms). */

setInterval(function() {

    /* Since this ticks 60 times a second, we divide the top property‘s increment of 1 unit per 1 second by 60. */

    element.style.top = (startingTop += 1/60);

}, 16);

/* requestAnimationFrame: Attempts to run at 60fps based on whether the browser is in an optimal state. */

function tick () {

    element.style.top = (startingTop += 1/60);

}

window.requestAnimationFrame(tick);

  RAF 产生了推动动画性能的最大可能性,你可以对你的代码进行单一的变更.

 CSS 转换

  CSS转换通过把动画逻辑甩给浏览器本身去处理而超越了jQuery,这在以下几方面是有效果的:(1)优化DOM交互和内存消耗以避免卡顿(颠簸),(2)利用引擎的RAF原则,(3)强制硬件加速(利用GPU的能力来提高动画性能)。

  然而,现实是,这些优化也可以在JavaScript中直接执行。GSAP已经这样做了多年。Velocity.js,一个新的动画引擎,不仅利用了同样的技术,而且还向前多走了几步——我们不久会探讨这些。

  面对事实,JavaScript动画可以与CSS转换竞争只是我们康复计划的第一步。第二步是实现“JavaScript动画实际上可以比CSS转换更快”。

  现在我们开始谈谈CSS变换的弱点:

  • transition强制硬件加速会加大GPU消耗,高负荷情形下将导致运行不流畅。这种情况在移动设备上尤为明显。(特殊情况下,比如当数据在浏览器主线程和排版线程之间传递产生的瓶颈也会导致不流畅)。某些CSS属性,比如transform和opacity,则不受这些瓶颈影响。Adobe在这里精心总结了这些问题。
  • transition在IE10以下没有用,造成的自IE8和IE9以来的桌面站点可用性问题至今仍然广泛存在。
  • 由于transition并不是由JavaScript原生控制(而仅仅是由JavaScript触发),浏览器无法获知如何与控制这些transition的JavaScript代码同步地优化他们。

  相反的,基于JavaScript的动画库则可以自行确定合适开启硬件。它们原生支持各版本IE浏览器,并且它们尤其适合批量动画优化。

  我的建议是仅当你单独为移动端开发且仅实现简单动画时使用原生CSS变换。这种环境下,transition是一种原生有效的解决方案,可以使你在样式表中实现所有动画逻辑,而不用添加额外的JavaScript库,从而避免你的页面变得臃肿。然而,但你在设计复杂的UI,或者是开发存在不同状态的UI的App时,你就应该使用动画库以使动画保持流畅,同时是工作流程易于管理。Transit是一个在管理CSS变换方面做得尤其优秀的库。

 JavaScript 动画

  好了,那JavaScript可就在性能方面占据上风了. 但Javascript究竟具体快了多少呢? 好吧 — 最初 — 对于构建一个实在的 3D动画示例 是足够快的,通常在构建中你只会看到有使用WebGL. 而构建一个 多媒体小动画 也够了,通常你看到只会使用Flash或者After Effects构建. 而构建一个 虚拟世界 也够了,通常你只会看到使用canvas构建.

  为了对领先的动画库,当然还要包含Transit(它使用CSS渐变效果),进行直接的对比, 回头去看看Velocity在VelocityJS.org上的文档.

  问题仍然是: JavaScript是怎样具体的达成其高水平性能的? 下面是对基于Javascript动画能够被执行这一目标的优化的一个简短清单:

  • 同步 DOM → 在整个动画链中间入栈以最小化布局抖动.
  • 为整个链式调用缓存属性值,以最小化DOM查询发生 (这些就是高性能DOM动画的坑).
  • 在同样的调用中缓存整个同级别元素的单元转换率 (比如 px 到 %, em, 等等.).
  • 当更新可能会在视觉上不可见时跳过样式更新.

  回顾一下我们先前学过的关于布局颠簸的知识,Velocity.js利用这些最佳实践来缓存动画结束值以复用为随后动画的开始值,从而避免了重新查询DOM以获取元素的开始值:


1

2

3

4

5

$element

    /* Slide the element down into view. */

    .velocity({ opacity: 1, top: "50%" })

    /* After a delay of 1000ms, slide the element out of view. */

    .velocity({ opacity: 0, top: "-50%" }, { delay: 1000 });

  在上面例子中,第二个 Velocity 调用知道它应该自动从 opacity为1 和 top为50% 开始。

  浏览器本身最终能够执行许多这些相同的优化,但这样做会明显减少开发者能够制作的动画代码的方式。因此,出于同样原因,由于jQuery不使用RAF(如上所述),浏览器就不会强制优化它,甚至给出一个很小的机会去打破规格或偏离预期的行为。

  最后,我们对这两个JavaScript动画库(Velocity.js 和 GSAP)互相比较一下。

  GSAP was the first animation library to demonstrate JavaScript‘s impressive DOM animation performance. It does, however, have a few drawbacks:

  • In medium-to-high stress animations, GSAP‘s DOM interaction overhead causes dropped frames at the start of, and between, animations.
  • Whereas Velocity.js is released under the ultra-permissive MIT license, GSAP is closed-source and requires an annual licensing fee for many types of businesses.
  • Because GSAP is a full animation suite, it is triple the size of Velocity. However, since GSAP is so richly-featured, it does have the benefit of being a Swiss Army Knife of animation.

  My recommendation is to use GSAP when you require precise control over timing (e.g. remapping, pause/resume) and motion (e.g. bezier curve paths). These features are crucial for game development and certain niche applications, but are typically not needed in web app UI‘s.

 Velocity.js

  引用 GSAP 丰富的特性并不代表Velocity自身在特性上是轻量级的. 相反,在压缩后仅有的7kb中,Velocity不仅仅复制了jQuery $.animate()的所有功能, 它还把颜色动画,转换,循环,easing效果,类动画还有滚动都打包了进去.

  总之,Velocity是jQuery,jQuery UI,以及CSS渐变效果的最佳组合.

  此外,从便利的角度看,Velocity在hood(盖子,大概意思是公共的接口)之下使用jQuery的 $.queue() 方法, 如此就可以实现同 jQuery 的 $.animate(), $.fade(), 和 $.delay() 函数的无缝互操作. 而且,由于Velocity的语法同 $.animate() 的语法是相同的, 你不需要改变页面的任何代码.

  让我们快速地来看一看 Velocity.js. 在基础的层面,Velocity的行为同$.animate()一样:


1

2

3

4

5

6

$element

    .delay(1000)

    /* Use Velocity to animate the element‘s top property over a duration of 2000ms. */

    .velocity({ top: "50%" }, 2000)

    /* Use a standard jQuery method to fade the element out once Velocity is done animating top. */

    .fadeOut(1000);

  在其最高级的层面,可以创建带有3D动画的复杂滚动场景 — 几乎只要用到两行简单的代码:


1

2

3

4

5

$element

    /* Scroll the browser to the top of this element over a duration of 1000ms. */

    .velocity("scroll", 1000)

    /* Then rotate the element around its Y axis by 360 degrees. */

    .velocity({ rotateY: "360deg" }, 1000);

 结束

  Velocity的目标是仍旧成为 DOM 中的动画性能和便利性的领导者。本文侧重于前者。  Head on over to  VelocityJS.org更多地了解后者。

  之前,我们得出结论,记住,一个高性能的UI并不仅仅是选择更多的Lib。你的页面的其余部分也应进行优化。可以从Google talks了解更多,更梦幻的内容:

  原文地址:http://davidwalsh.name/css-js-animation

时间: 2024-10-15 12:10:24

CSS 和 JS 动画哪个更快的相关文章

CSS vs. JS Animation: 哪个更快

CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点? 这篇文章将会逐点讲解基于JavaScript的DOM动画库,比如Velocity.js和GSAP,是如何比jQuery和基于CSS的动画库高效的. jQuery 让我们先从这个事实开始:JavaScript和jQuery被

CSS vs JS动画:谁更快?

CSS vs JS动画:谁更快? 2016-05-16 前端大全 (点击上方公众号,可快速关注) 英文:Julian Shapiro 译者:MZhou's blog 链接:http://zencode.in/19.CSS-vs-JS动画:谁更快?.html 这篇文章翻译自 Julian Shapiro 的 CSS vs. JS Animation: Which is Faster?.Julian Shapiro 也是 Velocity.js 的创造者.这是一个非常高效.简单易用的JS动画库.他在

CSS VS JS动画,哪个更快[译]

英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js动画库.在<Javascript网页动画设计>一书中对这个库有很多更具体的剖析,对Velocity及JS动画感兴趣的可以一看. 基于Javascript的动画怎么可能总是和 CSS transition 一样快,甚至更快呢?到底是什么秘密呢?Adobe 和 Google 是怎么做到让他们的富媒体移

JQuery动画插件Velocity.js发布:更快的动画切换速度

5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换.转换(transform).循环.缓动.CSS切换.Scroll功能,它是jQuery. jQuery UI.CSS变换 在动画方面的最佳组合.Velocity.js支持IE8+.Chrome

How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能

个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完美,令人愉悦的用户体验的重要性,结果网络应用变得越来越重并且拥有更多动态交互的功能.这就要求网络应用提供更加复杂的动画来实现平滑的状态过渡贯穿于用户的使用过程当中.现在,这已经司空见惯.用户变得越来越挑剔,他们潜意识期许可以获得快速响应和良好交互的用户界面. 然而,让界面具有动画效果不一定是件简单的

CSS VS JS动画,哪个更快

JQuery 让我们从最基础的开始说起: Javascript 和 jQuery 两者不能错误的混为一谈.Javascript 动画很快,而 jQuery 动画却慢下来.为什么呢?因为尽管 jQuery 非常强大,但是它的设计目标并不是一个高效的动画引擎: 1.JQuery不能避免layout thrashing,由于它不仅仅要服务于动画,也需要用于其他场景. 2.JQuery的内存消耗会频繁的触发垃圾回收机制,而垃圾回收会让动画暂时卡住. 3.JQuery使用了setInterval而不是re

自从用了Less 编写css,你比以前更快了~(sublime编译)

之所以用这个标题呢,主要是最近调侃杰伦太有意思了. 好吧,开个玩笑而已. 如果你了解过Less,并对之很熟悉,就不用往下看了. 如果你没用过,恭喜,这是一个入门级的教程,学会了它,可以为你节省10%的绳命. 首先,我们得知道Less能干什么.如: @width:300px; @fonts:12px bold "宋体,Verdana"; .block-header{ color:#5c5c5c; .elem-title{ font:@fonts; width:@width; } .ele

更轻更快的Vue.js 2.0与其他框架对比(转)

更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0 在性能上有显著的提升,同时保持轻量的文件下载: 渲染层基于一个轻量级的Virtual DOM实现进行了重写,该Virtual DOM实现fork自snabbdom.新的渲染层相比v1带来了巨大的性能提升,也让Vue 2.0成为了最快速的框架之一. 根据1.0到2.0迁移指南,“大约90%的API是相

JS动画与CSS动画

一.JS动画(setInterval setTimeOut requestAnimationFrame) 优点: 1)过程控制能力强.可以对动画工程进行精准的控制,暂停.取消.开始.终止都可以. 2)动画效果多.炫酷.有一些效果是CSS动画所不能实现的 3)兼容性比较高 缺点: 1)由于JS是通过不断的操作DOM和CSS的属性来实现动画效果的,这需要不断的重排(reflow)和重绘(repaint),非常消耗浏览器的内存.(在PC端有浏览 器可以分配的内存比较大,动画的重排(reflow)和重绘