CSS と JS アニメーション: どちらが速いですか?

この記事は、Julian Shapiro による CSS vs. JS Anime: Which is Faster? を翻訳したものです。 Julian Shapiro は Velocity.js の作成者でもあります。これは、非常に効率的でシンプルで使いやすい JS アニメーション ライブラリです。 Webアニメーションにおいて高い業績を誇る。

による秘密は何ですか？ Adobe と Google はどのようにしてメディア豊富なモバイル サイトをネイティブ アプリと同じくらい高速にしているのでしょうか?

この記事では、JavaScript ベースの DOM アニメーション ライブラリ (Velocity.js や GSAP など) が jQuery や CSS ベースのアニメーション ライブラリよりも効率的である理由を段階的に説明します。

jQuery

基本から始めましょう: Javascript と jQuery を混同してはなりません。 Javascript アニメーションは高速ですが、jQuery アニメーションは低速です。なぜ？ jQuery は非常に強力ですが、その設計目標は効率的なアニメーション エンジンになることではありません:

jQuery はレイアウト スラッシングを避けることができません (これを「レイアウト スラッシング」と翻訳することを好む人もいますが、これにより冗長な再レイアウト/リフローが発生します)。コードはアニメーションに使用されるだけでなく、他の多くのシナリオでも使用されるからです。

• jQuery は大量のメモリを消費し、ガベージ コレクションを頻繁にトリガーします。ガベージ コレクションがトリガーされると、アニメーションが停止しやすくなります。

• jQuery は reqeustAnimationFrame(RAF) の代わりに setInterval を使用します。これは、ウィンドウがフォーカスを失うと RAF が起動を停止し、jQuery のバグが発生するためです。 (現在、jQuery はすでに RAF を使用しています)

• レイアウトのスラッシングによりアニメーションが開始時にフリーズし、ガベージ コレクションのトリガーにより実行中にアニメーションがフリーズすることに注意してください。RAF を使用しないとアニメーションのフレーム レートが低下します。下に。

実装例

レイアウトのスラッシングを回避するには、DOM にバッチでアクセスして更新する必要があります。

var currentTop,
    currentLeft;
/* 有 layout thrashing. */
currentTop = element.style.top; /* 访问 */
element.style.top = currentTop + 1; /* 更新 */
currentLeft = element.style.left; /* 访问 */
element.style.left = currentLeft + 1; /* 更新 */
/* 没有 layout thrashing. */
currentTop = element.style.top; /* 访问 */
currentLeft = element.style.left; /* 访问 */
element.style.top = currentTop + 1; /* 更新 */
element.style.left = currentLeft + 1; /* 更新 */

更新操作後のアクセス操作では、ブラウザーにページ要素のスタイルの再計算が強制されます（正しい値を取得するには、更新されたスタイルを適用する必要があるため）。これにより、通常の操作では大きなパフォーマンスの低下は発生しませんが、わずか 16 ミリ秒の間隔のアニメーションに配置すると、重大なパフォーマンスのオーバーヘッドが発生します。操作の順序を少し変更するだけで、アニメーションのパフォーマンスが大幅に向上します。

同様に、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 Transition

CSS Transitionのアニメーションロジックはブラウザによって実行されるため、パフォーマンスはjQueryアニメーションよりも優れている可能性があります。その利点は次の点に反映されています:

DOM 操作を最適化し、メモリ消費を回避することでラグを削減します

• RAF と同様のメカニズムを使用します

• ハードウェア アクセラレーションの使用を強制します (GPU を通じてアニメーションのパフォーマンスを向上させます)

ただし, 実はJavaScriptでもこれらの最適化を利用することができます。 GSAP はこれらの最適化を長年にわたって行ってきました。 Velocity.js は、これらの最適化を行うだけでなく、さらに先を行く新しいアニメーション エンジンです。これらについては後で説明します。

事実を直視すると、JavaScript アニメーションを CSS アニメーションのパフォーマンスと同等にすることは、私たちの素晴らしい計画の第一歩にすぎません。 2 番目のステップは最も重要なステップで、JavaScript アニメーションを CSS アニメーションよりも高速にします。

CSS アニメーション ライブラリの欠陥を見てみましょう:

Transition では GPU の使用が強制されます。 ハードウェアアクセラレーション。その結果、ブラウザは常に高負荷で実行され、アニメーションが停止する原因となります。これはモバイルブラウザではさらに深刻です。 （なお、ブラウザのメインスレッドと合成スレッド間で頻繁にデータ通信を行う場合は、特にパフォーマンスを消費するため、ラグが発生しやすくなります。 CSS プロパティは影響を受けません。 Adobe のブログではこれについて説明しています。

• IE 10 未満のブラウザは移行をサポートしていません。現在、IE8 と IE9 は依然として非常に人気があります。

• トランジションを Javascript で完全に制御することはできません (トランジションは Javascript によってのみトリガーできます)。これは、ブラウザーが Javascript にアニメーションを制御させ、同時にアニメーションのパフォーマンスを最適化する方法がわからないためです。

• 一方で: Javascript に基づいて、ハードウェア アクセラレーションをいつ有効にするかを決定でき、IE のすべてのバージョンをサポートでき、バッチ アニメーションを完全に最適化できます。

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

Javascriptアニメーション

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

　　为了更直接的来比较主流动画库的性能，包括 Transit（使用了 CSS transition），让我们打开Velocity的官方文档。

　　之前那个问题还在：Javascript 是如何达到高性能的呢？下面是一个列表，列举了基于 Javascript 的动画库能做的事情：

• 同步DOM -> 在整个动画链中微调堆栈以达到最小的layout thrashing。

• 缓存链式操作中的属性值，这样可以最小化DOM的查询操作（这就是高性能 DOM 动画的阿喀琉斯之踵）

• 在同一个跨同层元素的调用中缓存单位转化比率（例如px转换成%、em等等单位）

• 忽略那些变动小到根本看不出来的DOM更新

　　让我们重新温习下之前学到的关于layout thrashing的知识点。Velocity.js 运用了这些最佳实践，缓存了动画结束时的属性值，在紧接的下一次动画开始时使用。这样可以避免重新查询动画的起始属性值。

$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%。

　　浏览器也可以使用与此类似的优化，但是要做这些事情太过激进，使用场景也会受到限制，开发者就有可能会写出有bug的动画代码。jQuery就是因为这个原因没有使用RAF（如上所说），浏览器永远不会强行实施可能打破规范或者可能偏离期望行为的优化。

　　最后，让我们来比较下两个Javascript框架（velocity.js 和 GSAP）。

• GASP 是一个快速且功能丰富的动画平台。Velocity则更为轻量级，它大大地改善了UI动画性能和工作流程。

• GSAP 需要付费才能用于商业产品。Velocity 是完全免费的，它使用了自由度极高的 MIT 协议。

• 性能方面，两者几乎相当，很难区分胜负。

我个人推荐在你需要如下功能时使用 GSAP：精确控制时间（例如 remapping，暂停/继续/跳过），或者需要动作（例如：贝赛尔曲线路径），又或者复杂的动画组合/队列。这些特性对游戏开发或者复杂的应用很重要，但是对普通的 web app 的 UI 不太需要。

　Velocity.js

　　之前提到了 GSAP 有着丰富的功能，但这不代表 Velocity 的功能简单。相反的，Velocity 在 zip 压缩之后只有 7kb，它不仅仅实现了 jQuery animate 方法的所有功能，还包含了 颜色、transforms、loop、easings、class 动画和滚动动画等功能。

　　简单的说就是 Velocity 包含了 jQuery、 jQuery UI 和 CSS transition 的功能。

　　更进一步从易用性的角度来讲，Velocity 使用了 jQuery 的$.queue() 方法，因此可以无缝过渡到 jQuery 的$.animate()、$.fade()和$.delay()方法。并且 Velocity 的语法和$.animate()一摸一样，所以我们根本不需要修改页面的现有代码。

　　让我们快速过一下 Velocity.js 的例子：

$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);

　　如下是一个高级用法：滚动网页到当前元素并且旋转元素。这样的动画只需要简单的几行代码：

$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 动画领域性能最好易用性最高的库。这篇文章主要关注了性能方面。易用性方面可以前往 VelocityJS.org 了解。

　　在结束之前，请记住一个高性能的 UI 绝不仅仅是选择一个正确的动画库。页面上的其他代码也需要优化。可以看看Google那些非常棒的演讲：

Jank Free

Rendering Without Lumps

Faster Websites