CSSとJavaScriptを使ってアニメを作る時に性能差がありますか？
CSSやJavaScriptを使ってあるアニメを作る予定ですが、
CSSだけで具現する資料がいて、
CSSだけ作るのとJavaScriptを使って作ることの性能差がありますか？
0
4Answer
仕様書によると、こうなっています。
The animations created using the Web Animations API, however, once created, are executed entirely by the user agent, meaning they share the same performance characteristics as animations defined declaratively.
（訳）
アニメーションAPIで作成されたアニメーションですが、一度作成された後は、ユーザーエージェントによって実行されますので、定義済みアニメーション（訳注：ここではCSSアニメーションのこと）と同様のパフォーマンス特性を持つと言えます。
とあります。
なので『JavaScriptのアニメーションAPI』と『CSS Animation』には、パフォーマンス上の差はないのではないでしょうか。
3Like
Comments
あ、クローズしてたんですね。失礼しました。
ChatGPTに聞いてみました。
個人的にもCSSで実装できるアニメーションはCSSで、それ以外のユーザの操作で発火するなど凝ったアニメーションなどはJavaScriptで、とすれば問題ないように思います
1Like
Comments
@reliya1541
Questioner
ユーザの操作がないのはCSSでしてみます。
比較出来たら記事で書いてみます。
ご返事ありがとうございます。
あなたが作るものと作り方によるとしか言いようがないと思いますけど？
とにかくやってみて比較したら良いのでは？
0Like
噂程度というかまあ、実際に間違いないソースがどこかにはあると思うのですがCSSを使うとハードウェアアクセラレーションを使用しGPUが処理してくれる説があります。
https://developer.mozilla.org/ja/docs/Learn_web_development/Extensions/Performance/CSS
ただ、改善としては数秒未満でしょうしパフォーマンスは予測するな実測しろが原則ですね。
パフォーマンス以外にCSSとJavaScriptの比較としては、
JavaScriptは手続的なので、若干ソースコードでの内容や処理をプログラマーが予測できない懸念があると思っています。
(JavaScriptについての一定の理解があるなら、全てを汎用的に記述すべきだと私は考えています)
0Like