css 3アニメーションとjsアニメーションの対比

Chromiumプロジェクトでは、レンダリングスレッドはmain threadとcompositor threadに分けられます.CSSアニメーションがtransformsとopacityだけを変更した場合、CSSアニメーション全体がcompositor threadで完了します(JSアニメーションはmain threadで実行され、compositorが次の操作をトリガします).JSで高価なタスクを実行すると、main threadは忙しくなり、CSSアニメーションはcompositor threadを使用することでスムーズになります.
メインスレッドでは、1本のLayerツリー(LayerTreeHost)を維持し、TiledLayerを管理し、compositor threadでは、同じ1本のLayerTreeHostImplを維持し、LayerImplを管理し、この2本のツリーの内容はコピー関係である.したがって、Javascriptがmain threadでLayerTreeHostを操作している間に、compositor threadはLayerTreeHostImplでレンダリングすることができます.Javascriptが忙しくてメインスレッドが詰まっている場合、画面に合成するプロセスもスムーズです.偽死防止を実現するために、マウスのキーボードメッセージはまずcompositor threadに配布され、main threadに送信されます.このように、main threadが多忙である場合、compositor threadは、マウスがスクロールするとmain threadが多忙になり、compositor threadもスクロールメッセージを処理し、コミットされたページ部分(コミットされていない部分が白くなる)をスクロールすることができる.
CSSアニメーションがJSよりスムーズである前提:

Chromiumベースのブラウザで

JSは、いくつかの高価なタスク

を実行しています.

同時にCSSアニメーションがlayoutまたはpaintをトリガしないCSSアニメーションまたはJSアニメーションがpaintまたはlayoutをトリガした場合、main threadによるLayerツリーの再計算が必要となり、CSSアニメーションまたはJSアニメーションが後続の操作をブロックします.

CSS Triggersを参照すると、次の属性の変更のみが「Compositeのみがトリガーされ、layoutまたはpaintはトリガーされません」に合致します.

backface-visibility

opacity

perspective

perspective-origin

transfrom

そのため、3 D加速やopacityの修正をした場合にのみ、CSSアニメーションの利点を利用することができます.
したがって、ほとんどの適用シーンでは、効率の観点が注目されるのは、以下の問題です.

layout

を引き起こすかどうか

repaintの面積

が高消費属性(css shadow等)

であるかどうか

ハードウェアアクセラレータが有効かどうか

ではChromium以外のブラウザは?CSSTrickで効率を比較した.
Animated properties
JS-based Animationの方が早い
CSS-based Animationの方が早い
top, left, width, height
Windows Surface RT, iPhone 5s (iOS7), iPad 3 (iOS 6), iPad 3 (iOS7), Samsung Galaxy Tab 2, Chrome, Firefox, Safari, Opera, Kindle Fire HD, IE11
(none)
translate, scale
Windows Surface RT, iPhone 5s (iOS7), iPad 3 (iOS7), Samsung Galaxy Tab 2, Firefox, Opera, IE11
iPad 3 (iOS6), Safari, Chrome
Chromium以外の他のブラウザでは、CSSアニメーションの効率の最適化は行われていないことがわかります.MSDNは「より良いレンダリング性能を提供する」と述べていますが、テストではサポートされていません.
現在のCSSアニメーションとJSアニメーションの主な違いは

機能カバー面、JSはCSS 3より大きい

アニメーションプロセスを定義する@keyframesは再帰定義をサポートしていないが、類似のアニメーションプロセスが複数ある場合、複数のパラメータを調整して生成する必要がある場合、jQuery Mobileのアニメーションスキームなどの大きな冗長性があり、JSは天然に複数の異なるアニメーションプロセス

を1つの関数で実現することができる.

時間スケールでは、@keyframesのアニメーション粒度が太く、JSのアニメーション粒度制御は細かく

可能である

CSS 3アニメーションでサポートされている時間関数は非常に少なく、柔軟性が足りない

既存のインタフェースでは、CSS 3アニメーションは2つ以上の状態変換

をサポートすることができない.

実現/再構築の難易度は異なり、CSS 3はJSよりも簡単で、性能調整方向は

固定されている.

フレームレートのパフォーマンスが悪い低バージョンブラウザでは、CSS 3は自然にダウングレードできますが、JSでは追加コード

を書く必要があります.

CSSアニメーションには天然イベントサポート(TransitionEnd、AnimationEndがありますが、ブラウザに接頭辞を付ける必要があります)、JSはイベント

を自分で書く必要があります.

CSS 3は互換性の問題があるが、JSの多くは互換性の問題がない

である.