CSSの最適化：DevToolsでアニメーションパフォーマンスを微調整します

CSSアニメーションパフォーマンス最適化ガイド：ブラウザ開発者ツールを使用してアニメーションの流ency性を向上させる

この記事は、Sitegroundとのコラボレーションで作成されています。 SitePointをサポートしてくれたパートナーに感謝します。

私たち全員が知っているように、CSSアニメーションのパフォーマンスは通常非常に高くなっています。ただし、多数の要素または複雑なアニメーションを含むシーンの場合、コードがパフォーマンスに最適化されていない場合、アニメーションがutter音を立て、ユーザーエクスペリエンスに影響を与えます。

この記事では、CSSアニメーションの背後にある実行中のメカニズムを確認するのに役立つ実用的なブラウザ開発者ツール機能を紹介します。アニメーションが立ち往生している場合、理由をよりよく理解して修正できます。

キーポイント

• ブラウザ開発者ツールを使用して、CSSアニメーションパフォーマンスを最適化し、アニメーションの遅れを引き起こす問題を特定し、アニメーションの根本的な操作に関する洞察を得ます。これらのツールは、フレームレートを確認し、コードをレビュー、編集し、デバッグし、パフォーマンスに影響を与える可能性のあるレイアウトと描画操作を分析できます。
• スムーズなアニメーション効果を取得するには、ターゲットフレームレートは60fps（1秒あたりのフレーム）に達する必要があります。より滑らかなアニメーションを確保するために、CSSの不透明度、変換、フィルターのみがアニメーション化されます。他のプロパティをアニメーション化すると、ブラウザに圧力をかけると、非常に短い時間で費用のかかるタスクを実行するように強制され、結果が悪い結果になります。
css属性、またはwill-changeおよびtranslateZ(0)手法を使用して、プロセスのためにブラウザにGPU（グラフィックス処理装置）にいくつかのプロパティの変更を引き渡させるように強制します。これにより、ハードウェアアクセラレーションが活用され、メインブラウザスレッドへの圧力の一部が軽減されます。ただし、過剰使用は、アニメーションのst音など、避けようとしている問題を引き起こす可能性があります。 translate3d(0,0,0)

開発者ツールとCSSパフォーマンス分析

ブラウザでスムーズに実行するには、アニメーションが60fpsに到達する必要があります。フレームレートが低いほど、アニメーション効果が悪化します。これは、ブラウザがその仕事をするためにフレームごとに約16ミリ秒しかないことを意味します。しかし、この間にそれは何をしましたか？あなたのブラウザが必要なフレームレートに追いつくかどうかをどうやって知るのですか？

アニメーション品質を評価する際に、ユーザーエクスペリエンスほど重要なことは何もないと思います。ただし、最新のブラウザ開発者ツールは常に100％信頼できるとは限りませんが、それらはより賢くなりつつあり、それらを使用してコードを確認、編集、デバッグできます。

フレームレートとCSSアニメーションのパフォーマンスを確認する必要がある場合、

同じことが当てはまります。これがどのように機能するかです。

Firefox Performance Tool Exploration

この記事では、Firefoxパフォーマンスツールを使用しています。もう1つの主要な競争相手は、Chrome Performance Toolsです。両方のブラウザが強力なパフォーマンス機能を提供するため、お気に入りのツールを選択できます。

Firefoxで開発者ツールを開くには、次のオプションのいずれかを選択します。

• Webページを右クリックして、[コンテキスト]メニューで[要素をチェック]チェックを選択します。
• またはキーボードショートカットを使用します：WindowsとLinuxでCtrl Shift I を押し、 cmd opt iをmacosで押します。

次に、[パフォーマンス]タブをクリックします。ここに、ウェブサイトのパフォーマンスデータの記録を開始できるボタンがあります。

このボタンを押して数秒待つか、ページでアクションを実行します。終了したら、[パフォーマンスの録音を停止]ボタンをクリックします：

すぐに、Firefoxは、コードの問題を理解するのに役立つ多くのよく組織化されたデータを提示します。

パフォーマンスパネルの録音の結果は次のとおりです。

「ウォーターフォール」セクションは、CSSの移行とキーフレームアニメーションに関連する問題を確認するのに最適です。他の部分は「コールツリー」と「JS Flameグラフ」で、JavaScriptコードでボトルネックを見つけるために使用できます。

滝の流れビューには、概要セクションと上部に詳細な内訳があります。両方で、データは色分けされています：

黄色のバーはJavaScript操作を示します。

• 紫色のバーは、HTML要素を計算するCSSスタイル（再計算スタイル）とページレイアウト（レイアウト）を表します。レイアウト操作はブラウザにとって非常に高価なので、重複したレイアウト（「リフロー」とも呼ばれるプロパティ - たとえば、
、
• 、margin、padding、top、left、
、など）、結果はutter音を立てる可能性があります。
• color緑色のバーは、要素が1つ以上のビットマップに描画されることを示します（描画）。アニメーションbackground-color、box-shadow、
、その他の属性には、高価な描画操作が含まれます。

データ型をフィルタリングして確認することもできます。たとえば、私はCSS関連のデータのみに興味があるので、画面の左上隅にあるフィルターアイコンをクリックすると、他のすべてを解除できます。

滝の流れの概要の下の緑色のバーは、フレームレート情報を示しています。

健康な表現は非常に高く見えるはずですが、最も重要なことには、深いギャップがあまり多くありません。

これを例で説明しましょう。

実用的なツール戦闘

これは、@keyframesキーワードを使用した単純なCSSアニメーションです。テストページは次のようになります：

長方形の紫色のフレームは、無限のループの内外でスライドします。

画面上の長方形ボックスの<div>要素の<code>margin-left属性を表すアニメーションによってこれを行います。 @keyframesアニメーションブロックは次のとおりです

@keyframes slide-margin {
  100% {
    margin-left: 0;
  }
}

このアニメーションから得られるパフォーマンスデータは次のとおりです。

フレームレートの視覚化は少し不均一に見え、平均フレームレートは44.82fpsで、少し低いです。

また、アニメーションプロセス中に発生するすべてのレイアウトおよび描画操作に注意してください。これらは、ブラウザがメインスレッドで実行する費用のかかるアクションであり、パフォーマンスに悪影響を及ぼします。

最後に、Inspectorツールにアクセスする場合は、アニメーションセクションをクリックしてからアニメーション名の上にホバリングすると、情報ボックスが現在のアニメーションに関するすべての関連データがポップアップ表示されます。アニメーションが最適化されている場合、事実を説明するメッセージが表示されます。この場合、メッセージはありません：

ここで、ブラウザがこの

ブロックを使用してcss

プロパティをアニメーション化するため、コードを変更して新しい録音を行います。 @keyframesこれは、パフォーマンスで記録された画像です：translate3d()

@keyframes slide-three-d {
  100% {
    transform: translate3d(0, 0, 0);
  }
}

フレームレートが高く（56.83FPS）、滝の流れには費用のかかるレイアウトと描画操作が表示されません。

また、開発者ツールの「インスペクター」タブを開くと、「アニメーション」パネルにアクセスしてアニメーション名にホバリングする場合、次のようなものが表示されます。

アニメーション名に関連付けられた情報ボックスは、すべてのアニメーションが最適化されていることを示しています。これは、ウェブサイトの訪問者にとって朗報です。

cssの

、

、

のみをアニメーション化します

この提案を聞いたことがあるかもしれませんが、それについてもう一度話す価値がある場合に備えて、アニメーションをスムーズに実行したい場合は、CSS（フィルター）の不透明、変換、フィルターのみがアニメーションを設定します。効果。他のすべてをアニメーション化すると、ブラウザに圧力をかけることができ、非常に短い時間で費用のかかるタスクを実行するように強制します。これは通常、最良の結果を生み出しません。

ブラウザのパフォーマンスツールが証明されているため、レイアウトと描画操作の繰り返しは友達ではありません。

ただし、各ブラウザはCSSプロパティをわずかに異なる方法で処理します。どのブラウザがプロパティ（特にWebアニメーションに関係するこれらのプロパティの値を更新する場合）の公開および描画操作をトリガーするかを知りたい場合は、CSSトリガーにアクセスしてください。

アニメーションのパフォーマンスを確保するために、人気のあるアプローチは、ブラウザにGPU（グラフィックス処理ユニット）へのプロパティの変更を強制的に引き渡させることです。

css属性、または

およびwill-change手法を使用してそれを実現できます。これらのヒントはすべて動作しますが、過剰に使用すると、実際に避けようとしている結果、つまりアニメーションがst音を立てることができます。 translateZ(0) translate3d(0,0,0)Webアニメーションのパフォーマンスのためのハードウェアアクセラレーションについて詳しく説明するつもりはありませんが、より深く掘り下げたい場合は、以下にリストされているリソースをご覧ください。

リソース

ポール・ルイスとポール・アイリッシュによる高性能のアニメーション
CSSアニメーションとトランジションパフォーマンス：Max Vujovicのブラウザ内を見るポール・ルイスとサム・トログッドによるアニメーションとパフォーマンス
• コンポジタのみのプロパティに固執し、ポールルイスによるレイヤーカウントを管理
SARA SOUEIDANによるGPU複合CSSのトリック
nick salloumによるCSSの概要
mdn
• によるCSSプロパティのアニメーション CSSアニメーションパフォーマンス（FAQ）
に関する
• FAQ CSSアニメーションのパフォーマンスに影響を与える重要な要因は何ですか？
CSSアニメーションのパフォーマンスは、さまざまな要因の影響を受けます。アニメーションの複雑さ、アニメーション化される要素の数、アニメーション化される属性はすべて機能します。

や

などのアニメーションプロパティは、公開または描画操作をトリガーしないため、パフォーマンスが向上する傾向があります。ただし、アニメーションのアニメーション

、

、

は、レイアウトオフセットや再描画を引き起こす可能性があり、アニメーションが遅くなります。さらに、デバイスのハードウェアとブラウザのレンダリングエンジンも、CSSアニメーションのパフォーマンスに影響します。

transform CSSアニメーションのパフォーマンスを測定する方法は？ opacity widthブラウザ開発者ツールを使用して、CSSアニメーションのパフォーマンスを測定できます。たとえば、Chromeでは、パフォーマンスタブを使用して、アニメーションの実行時間を記録および分析できます。このツールは、アニメーションライフサイクルの時間消費の詳細な内訳を提供し、パフォーマンスのボトルネックを特定するのに役立ちます。 height

スムーズなCSSアニメーションの理想的なフレームレートはいくらですか？

スムーズなアニメーションの理想的なフレームレートは、1秒あたり60フレーム（FPS）です。これは、ほとんどのデバイスがスクリーンを毎秒60回更新するためです。したがって、スムーズなアニメーションを作成するには、60fpsに対応する16.67ミリ秒（1秒/60）ごとにアニメーションを更新する必要があります。

CSSアニメーションを最適化してパフォーマンスを向上させる方法は？

CSSアニメーションを最適化してパフォーマンスを向上させるためのさまざまな戦略があります。一般的なアプローチは、transformやopacityなどの操作を投稿または描画することをトリガーしないアニメーションプロパティです。さらに、アニメーション化されている要素の数を減らしてアニメーションを簡素化すると、パフォーマンスが向上する可能性があります。 will-change属性を使用すると、アニメーション化される可能性のあるプロパティを求めることにより、ブラウザがアニメーションを最適化するのにも役立ちます。

パフォーマンスの観点から、CSSアニメーションとJavaScriptアニメーションの違いは何ですか？

CSSアニメーションは通常、JavaScriptアニメーションよりも優れたパフォーマンスを発揮します。これは、CSSアニメーションがメインのJavaScriptスレッドとは別のブラウザのレンダリングエンジンで実行されるためです。これは、JavaScriptスレッドがビジーである場合でも、CSSアニメーションがスムーズに実行できることを意味します。ただし、JavaScriptアニメーションは、より多くの制御と柔軟性を提供します。これは、複雑なアニメーションに有益です。

ハードウェアアクセラレーションはCSSアニメーションのパフォーマンスにどのように影響しますか？

ハードウェアアクセラレーションは、CSSアニメーションのパフォーマンスを大幅に改善できます。ハードウェアアクセラレーションが有効になると、ブラウザはいくつかのレンダリングタスクをデバイスのGPUにロードし、CPUを解放して他のタスクを処理します。これにより、特に多数の要素が含まれる複雑なアニメーションやアニメーションでは、よりスムーズなアニメーションにつながる可能性があります。

requestAnimationFrameアニメーションのパフォーマンスにおいて機能はどのような役割を果たしますか？

requestAnimationFrame関数は、次の塗り直しの前に指定された関数を呼び出すことにより、より効率的なアニメーションを可能にするJavaScriptメソッドです。これは、アニメーションをデバイスのリフレッシュレートと同期させることができることを意味し、その結果、アニメーションがスムーズになります。また、ブラウザがアニメーションを最適化し、CPUの使用量を削減し、パフォーマンスを向上させることができます。

DevToolsのパフォーマンスパネルを使用してCSSアニメーションパフォーマンスを向上させる方法は？

DevToolsのパフォーマンスパネルは、アニメーションライフサイクルでの時間消費の詳細な内訳を提供します。このデータを分析することにより、パフォーマンスのボトルネックを特定し、それに応じてアニメーションを最適化できます。たとえば、描画に多くの時間が費やされている場合は、アニメーションが描画操作をトリガーしないプロパティを検討することをお勧めします。

CSSアニメーションのパフォーマンスに対するレイアウトジッターの影響は何ですか？

レイアウトジッターとは、DOMの変更によりブラウザがレイアウト情報を繰り返し計算する必要がある状況を指します。これは、CSSアニメーションのパフォーマンスに深刻な影響を与える可能性があり、アニメーションがゆっくりと実行されるか、st音を引き起こします。レイアウトジッターを避けるために、DOMの読み取りと書き込み操作を一緒にバッチして、アニメーションを避けて公開操作のプロパティをトリガーしてみてください。

CSSwill-change属性を使用してアニメーションのパフォーマンスを向上させる方法は？

will-changeプロパティを使用すると、アニメーションを計画するプロパティの前にブラウザに通知できます。これにより、アニメーションが開始される前に、ブラウザが必要な最適化を実行できるため、アニメーションがスムーズになる可能性があります。ただし、ブラウザがより多くのリソースを消費し、パフォーマンスにマイナスの影響を与える可能性があるため、will-change属性は注意して使用する必要があります。

（上記のすべてのリンクを実際のリンクに置き換える必要があることに注意してください）