JavaScript/jQuery动画与CSS动画性能比较

一直以来，大家可能认为基于JavaScript的动画总是比CSS动画一样快或更快。事实是这样的吗？本文将介绍基于JavaScript的DOM动画库（如Velocity.js和GSAP）是否比基于jQuery和CSS的动画库更为出色。

jQuery

JavaScript和jQuery被错误地混为一谈。JavaScript动画很快。jQuery减慢了速度。为什么？因为 – 尽管jQuery非常强大 ，但jQuery的设计目标并不是成为一个高性能的动画引擎：

•jQuery不能避免布局的摆动（layout thrashing），因为它的代码库，为的是除了动画以外的许多用途。

•jQuery的内存消耗频繁地触发了暂时冻结动画的垃圾收集。

•jQuery使用setInterval而不是requestAnimationFrame（RAF）

需要注意的是布局中造成启动动画抖动，垃圾收集时导致动画的抖动，其根本原因就是产生较低的帧速率。

实现的例子

避免布局抖动包括简单地将DOM查询和DOM更新组合在一起：

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 */

在更新后进行的查询强制浏览器重新计算页面的样式数据（同时考虑新的更新效果）。这对于仅在16ms的微小间隔上运行的动画产生显着的开销。

同样，执行RAF也不需要对现有代码库进行重大的修改。我们来比较RAF的基本实现与setInterval的基本实现：

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 Transitions

通过将动画逻辑转载到浏览器本身，CSS Transitions优于jQuery，这是有效的：

1）优化DOM交互和内存消耗以避免抖动

2）利用RAF的原理

3）强制硬件加速（利用GPU提升动画效果）

然而，现实情况是，这些优化也可以直接在JavaScript中执行。GSAP已经做了很多年了；Velocity.js，一个新的动画引擎，同样是利用这样的技术。

根据JavaScript动画可以更优于CSS动画的事实，那我们首先来看看CSS动画库的缺点：

• Transitions强制硬件加速GPU，导致高压力情况下的抖动和绑定。这些影响在移动设备上恶化。（具体而言，抖动是当数据在浏览器的主线程和其合成的线程之间传递时发生较大开销的结果。一些CSS属性，如transforms 和opacity，就是如此。）

• transforms在Internet Explorer 10以下无法工作，导致桌面版网站的辅助功能问题，因为IE8和IE9仍然还有较大量的用户。

• 因为transforms不被JavaScript本地控制（他们只是引发JavaScript），浏览器不知道如何优化同步的JavaScript代码，操纵他们的转换。

相反：基于JavaScript的动画库可以自己决定什么时候启用硬件加速，它们固有地在所有版本的IE中工作，它们非常适合批量动画优化。

JavaScript动画

当涉及到性能时，JavaScript占据上风。但是JavaScript能有多快呢？现在，来建立一个3D动画演示（可以访问：http://www.ikinsoft.com/3ddemo/Velocity.html）。

问题仍然存在：JavaScript如何达到高水平的性能？以下是基于JavaScript的动画能够执行的优化列表：

• 在整个动画链中同步DOM→补间堆栈，以最大限度地减少布局抖动。

• 通过链接调用来缓存属性值，以便最小化DOM查询的发生（这是执行DOM动画的基本技能）。

• 同一个调用中的同级单元的缓存单元转换率（例如，px到％，em等）。

• 当视觉上看不到更新时，跳过样式更新。

Velocity.js利用这些实践来缓存要重复使用的动画的最终值，作为随后的动画的起始值，从而避免重新使用元素的起始值的DOM：

$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，最高值为50％并自动开始运行。

浏览器最终可以执行许多这些相同的优化，但是这样做将会大大缩小开发者制作动画代码的方式。因此，由于同样的原因，jQuery不使用RAF，因而浏览器永远不会进行优化，甚至有可能破坏规范或偏离预期行为的机会。

总结

本文对比了JS及其框架和CSS3的动画性能，并深入剖析了其内在原因。技术结论大致如下：

1. jQuery出于设计原因，在动画性能上表现最差

2. CSS3由于把动画逻辑推给了浏览器，优化了内存消耗、DOM操作和默认利用了RAF，所以要比jQuery动画性能更好

3. CSS3可能会引起浏览器主线程和复合器线程之间过度数据交互，从而导致性能下降

4. 纯JS实现的动画，在利用RAF和注意布局摆动处理时，可以获得媲美CSS3的动画性能，而在浏览器兼容性上比CSS3更好

应用选型建议：

• 对于简单页面动画，建议优先选择CSS3动画

• 对于复杂动画，建议使用GSAP或Velocity