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

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

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

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

キーポイント

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

開(kāi)発者ツールとCSSパフォーマンス分析

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

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

フレームレートとCSSアニメーションのパフォーマンスを確認(rèn)する必要がある場(chǎng)合、

同じことが當(dāng)てはまります。これがどのように機(jī)能するかです。

Firefox Performance Tool Exploration

この記事では、Firefoxパフォーマンスツールを使用しています。もう1つの主要な競(jìng)爭(zhēng)相手は、Chrome Performance Toolsです。両方のブラウザが強(qiáng)力なパフォーマンス機(jī)能を提供するため、お?dú)荬巳毪辘违末`ルを選択できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

実用的なツール戦闘

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

長(zhǎng)方形の紫色のフレームは、無(wú)限のループの內(nèi)外でスライドします。

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

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

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

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

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

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

ここで、ブラウザがこの

ブロックを使用してcss

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

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

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

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

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

cssの

、

、

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

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

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

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

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

css屬性、または

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

リソース

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

や

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

、

、

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

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

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

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

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

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

パフォーマンスの観點(diǎn)から、CSSアニメーションとJavaScriptアニメーションの違いは何ですか？

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

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

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

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

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

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

DevToolsのパフォーマンスパネルは、アニメーションライフサイクルでの時(shí)間消費(fèi)の詳細(xì)な內(nèi)訳を提供します。このデータを分析することにより、パフォーマンスのボトルネックを特定し、それに応じてアニメーションを最適化できます。たとえば、描畫(huà)に多くの時(shí)間が費(fèi)やされている場(chǎng)合は、アニメーションが描畫(huà)操作をトリガーしないプロパティを検討することをお?jiǎng)幛幛筏蓼埂?

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

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

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

will-changeプロパティを使用すると、アニメーションを計(jì)畫(huà)するプロパティの前にブラウザに通知できます。これにより、アニメーションが開(kāi)始される前に、ブラウザが必要な最適化を?qū)g行できるため、アニメーションがスムーズになる可能性があります。ただし、ブラウザがより多くのリソースを消費(fèi)し、パフォーマンスにマイナスの影響を與える可能性があるため、will-change屬性は注意して使用する必要があります。

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