Web アニメーションはユーザー エクスペリエンスを大幅に向上させますが、慎重に実装しないと Web サイトのパフォーマンスに影響を与える可能性もあります。この記事では、サイズが脈動する円要素をアニメーション化する 3 つの異なるアプローチを比較します。 CSS、最適化されていない JavaScript、最適化された JavaScript を使用し、Chrome DevTools を使用してそれらのパフォーマンスを測定する方法を説明します。

Web アニメーションの概要

アニメーションは現代の Web デザインの重要な部分です。これらはさまざまな方法を使用して実装できますが、最も一般的なのは純粋な CSS または JavaScript です。ただし、すべての方法が同様にうまく機能するわけではありません。これを実証するために、3 つの異なるアプローチをテストすることにしました:

• CSS で作成されたアニメーション。
• JavaScript を使用した最適化されていないアニメーション。
• requestAnimationFrame で JavaScript を使用してアニメーションを最適化しました。

プロジェクトのセットアップ

プロジェクトは GitHub で入手できます。簡単にダウンロードして試すことができます。

git クローン https://github.com/TomasDevs/animation-performance-test.git
CD アニメーション パフォーマンス テスト

ダウンロードしたら、css-animation、js-animation-optimized、js-animation-unoptimized のフォルダーを確認してください。

GitHub でプロジェクトを試してみる

パフォーマンスの測定

パフォーマンスを測定するために、Chrome DevTools のパフォーマンス パネルを使用しました。各アニメーションは 10 秒間実行されました。

パフォーマンス結果と分析

CSSアニメーション

出典: TomasDevs 作成 (2024)

• 合計ブロッキング時間: 390 ミリ秒

メモ:
CSS アニメーションはブラウザのネイティブ レンダリング エンジンにオフロードされるため、特に変換や不透明度などのプロパティを操作する場合にパフォーマンスが向上する傾向があります。このアニメーションは非常に効率的で、スクリプト作成やレンダリング時間への影響は最小限に抑えられています。

最適化されたJavaScriptアニメーション

出典: TomasDevs 作成 (2024)

• 合計ブロッキング時間: 400 ミリ秒

メモ:
最適化された JS バージョンでは、requestAnimationFrame とスムーズな正弦波関数を使用してアニメーションを管理します。 CSS アニメーションよりも多くのスクリプト時間を必要としますが、それでもかなり効率的に実行され、レンダリングとペイントの時間を低く保ちます。

最適化されていない JavaScript アニメーション

出典: TomasDevs 作成 (2024)

• 合計ブロッキング時間: 440 ミリ秒

メモ:
最適化されていない JS バージョンでは、タイミングの進行を考慮せずに単純なループを使用します。これにより、アニメーションの各フレームの計算が非効率になるため、スクリプト作成、レンダリング、ペイント時間が大幅に長くなります。

結論

• CSS アニメーションは、単純なアニメーションでは全体的に最も効率的です。これらはブラウザによるハードウェア アクセラレーションの恩恵を受け、メイン スレッドの負荷を軽減します。
• 最適化された JavaScript アニメーションが僅差で 2 位です。アニメーションをより動的に制御する必要がある場合、スムーズなパフォーマンスを確保するには、requestAnimationFrame を使用して最適化することが不可欠です。
• 最適化されていない JavaScript アニメーションは、非効率的な計算によりブラウザのレンダリング エンジンに不必要な負担をかけるため、パフォーマンスが最悪になります。

ディスカッションに参加する

Web アニメーションの最適化に関する経験は何ですか?パフォーマンスを向上させるための追加のヒントやコツはありますか?以下のコメント欄でお知らせください!