横方向の自動でループするスクロールコンテンツをCSS、JavaScriptどちらで実装したほうが処理のパフォーマンスがいいのか

Question

参考サイト

https://www.hailey5cafe.com/kyoto/

概要

上記の参考サイトのファーストビューのような横方向の自動でループするスクロールコンテンツを実装する方法に悩んでいます。

• CSSのanimationプロパティでinfiniteでアニメーションを設定をして、positionやtranslateなどで移動させる
• JavaScriptでoffsetなど座標プロパティを操作してアニメーションさせる
• JavaScriptの既存ライブラリを使う

・https://github.com/woodroots/infiniteslidev2
・http://kenwheeler.github.io/slick/

質問

概要の3つの選択肢のうち、
どの実装方法が一番ブラウザに負荷がかからず、サイト閲覧時に影響を与えにくいのでしょうか？

CSSのanimationを使う（infiniteなどを使いすぎる）と、サイトでスクロールをした際にカクついたりする気がするので、
JavaScriptで実装したほうがいいのかなあと思っているのですが、皆様のご意見をお聞きしたいです。

Answer 1

参考サイトは CSS animation を使ってますね。

普通に考えれば、軽い順に
CSS animation ＞＞ JS ＞ JSライブラリー
だと思います。
JSの場合は、書き方によってはJSライブラリーより重くなる可能性はありますが。

実際に計測するのが確実ですが、有意な差が出ないかも。

JSやJSライブラリーでの実装はループでずっとコードが実行されている状態ですので、ほかにJSを使うときに影響がありますので、避けたいですね。

Answer 2

実際にテストプログラム作って測定してみては。
GoogleによるWebサイトパフォーマンス測定ツール「Lighthouse」入門