CSSアニメーションパフォーマンス最適化ガイド：ブラウザ開発者ツールを使用してアニメーションの流ency性を向上させる
この記事は、Sitegroundとのコラボレーションで作成されています。 SitePointをサポートしてくれたパートナーに感謝します。
私たち全員が知っているように、CSSアニメーションのパフォーマンスは通常非常に高くなっています。ただし、多数の要素または複雑なアニメーションを含むシーンの場合、コードがパフォーマンスに最適化されていない場合、アニメーションがutter音を立て、ユーザーエクスペリエンスに影響を与えます。
この記事では、CSSアニメーションの背後にある実行中のメカニズムを確認するのに役立つ実用的なブラウザ開発者ツール機能を紹介します。アニメーションが立ち往生している場合、理由をよりよく理解して修正できます。
will-changeおよびtranslateZ(0)手法を使用して、プロセスのためにブラウザにGPU（グラフィックス処理装置）にいくつかのプロパティの変更を引き渡させるように強制します。これにより、ハードウェアアクセラレーションが活用され、メインブラウザスレッドへの圧力の一部が軽減されます。ただし、過剰使用は、アニメーションのst音など、避けようとしている問題を引き起こす可能性があります。 translate3d(0,0,0)
アニメーション品質を評価する際に、ユーザーエクスペリエンスほど重要なことは何もないと思います。ただし、最新のブラウザ開発者ツールは常に100％信頼できるとは限りませんが、それらはより賢くなりつつあり、それらを使用してコードを確認、編集、デバッグできます。
フレームレートとCSSアニメーションのパフォーマンスを確認する必要がある場合、
同じことが当てはまります。これがどのように機能するかです。Firefox Performance Tool Exploration
Firefoxで開発者ツールを開くには、次のオプションのいずれかを選択します。
次に、[パフォーマンス]タブをクリックします。ここに、ウェブサイトのパフォーマンスデータの記録を開始できるボタンがあります。
このボタンを押して数秒待つか、ページでアクションを実行します。終了したら、[パフォーマンスの録音を停止]ボタンをクリックします：
すぐに、Firefoxは、コードの問題を理解するのに役立つ多くのよく組織化されたデータを提示します。 
滝の流れビューには、概要セクションと上部に詳細な内訳があります。両方で、データは色分けされています：
黄色のバーはJavaScript操作を示します。
margin、padding、top、left、color緑色のバーは、要素が1つ以上のビットマップに描画されることを示します（描画）。アニメーションbackground-color、box-shadow、データ型をフィルタリングして確認することもできます。たとえば、私はCSS関連のデータのみに興味があるので、画面の左上隅にあるフィルターアイコンをクリックすると、他のすべてを解除できます。
滝の流れの概要の下の緑色のバーは、フレームレート情報を示しています。
健康な表現は非常に高く見えるはずですが、最も重要なことには、深いギャップがあまり多くありません。
これを例で説明しましょう。
これは、@keyframesキーワードを使用した単純なCSSアニメーションです。テストページは次のようになります：
長方形の紫色のフレームは、無限のループの内外でスライドします。
画面上の長方形ボックスの<div>要素の<code>margin-left属性を表すアニメーションによってこれを行います。 @keyframesアニメーションブロックは次のとおりです
@keyframes slide-margin {
100% {
margin-left: 0;
}
}
また、アニメーションプロセス中に発生するすべてのレイアウトおよび描画操作に注意してください。これらは、ブラウザがメインスレッドで実行する費用のかかるアクションであり、パフォーマンスに悪影響を及ぼします。 
ここで、ブラウザがこの
ブロックを使用してcssプロパティをアニメーション化するため、コードを変更して新しい録音を行います。
@keyframesこれは、パフォーマンスで記録された画像です：translate3d()
@keyframes slide-three-d {
100% {
transform: translate3d(0, 0, 0);
}
}また、開発者ツールの「インスペクター」タブを開くと、「アニメーション」パネルにアクセスしてアニメーション名にホバリングする場合、次のようなものが表示されます。
アニメーション名に関連付けられた情報ボックスは、すべてのアニメーションが最適化されていることを示しています。これは、ウェブサイトの訪問者にとって朗報です。 
、
、
のみをアニメーション化します
ブラウザのパフォーマンスツールが証明されているため、レイアウトと描画操作の繰り返しは友達ではありません。
ただし、各ブラウザはCSSプロパティをわずかに異なる方法で処理します。どのブラウザがプロパティ（特にWebアニメーションに関係するこれらのプロパティの値を更新する場合）の公開および描画操作をトリガーするかを知りたい場合は、CSSトリガーにアクセスしてください。アニメーションのパフォーマンスを確保するために、人気のあるアプローチは、ブラウザにGPU（グラフィックス処理ユニット）へのプロパティの変更を強制的に引き渡させることです。
css属性、またはおよびwill-change手法を使用してそれを実現できます。これらのヒントはすべて動作しますが、過剰に使用すると、実際に避けようとしている結果、つまりアニメーションがst音を立てることができます。 translateZ(0)
translate3d(0,0,0)Webアニメーションのパフォーマンスのためのハードウェアアクセラレーションについて詳しく説明するつもりはありませんが、より深く掘り下げたい場合は、以下にリストされているリソースをご覧ください。
リソース
transform CSSアニメーションのパフォーマンスを測定する方法は？ opacity
widthブラウザ開発者ツールを使用して、CSSアニメーションのパフォーマンスを測定できます。たとえば、Chromeでは、パフォーマンスタブを使用して、アニメーションの実行時間を記録および分析できます。このツールは、アニメーションライフサイクルの時間消費の詳細な内訳を提供し、パフォーマンスのボトルネックを特定するのに役立ちます。 height
スムーズなアニメーションの理想的なフレームレートは、1秒あたり60フレーム（FPS）です。これは、ほとんどのデバイスがスクリーンを毎秒60回更新するためです。したがって、スムーズなアニメーションを作成するには、60fpsに対応する16.67ミリ秒（1秒/60）ごとにアニメーションを更新する必要があります。
CSSアニメーションを最適化してパフォーマンスを向上させるためのさまざまな戦略があります。一般的なアプローチは、transformやopacityなどの操作を投稿または描画することをトリガーしないアニメーションプロパティです。さらに、アニメーション化されている要素の数を減らしてアニメーションを簡素化すると、パフォーマンスが向上する可能性があります。 will-change属性を使用すると、アニメーション化される可能性のあるプロパティを求めることにより、ブラウザがアニメーションを最適化するのにも役立ちます。
CSSアニメーションは通常、JavaScriptアニメーションよりも優れたパフォーマンスを発揮します。これは、CSSアニメーションがメインのJavaScriptスレッドとは別のブラウザのレンダリングエンジンで実行されるためです。これは、JavaScriptスレッドがビジーである場合でも、CSSアニメーションがスムーズに実行できることを意味します。ただし、JavaScriptアニメーションは、より多くの制御と柔軟性を提供します。これは、複雑なアニメーションに有益です。
ハードウェアアクセラレーションは、CSSアニメーションのパフォーマンスを大幅に改善できます。ハードウェアアクセラレーションが有効になると、ブラウザはいくつかのレンダリングタスクをデバイスのGPUにロードし、CPUを解放して他のタスクを処理します。これにより、特に多数の要素が含まれる複雑なアニメーションやアニメーションでは、よりスムーズなアニメーションにつながる可能性があります。
requestAnimationFrameアニメーションのパフォーマンスにおいて機能はどのような役割を果たしますか？ requestAnimationFrame関数は、次の塗り直しの前に指定された関数を呼び出すことにより、より効率的なアニメーションを可能にするJavaScriptメソッドです。これは、アニメーションをデバイスのリフレッシュレートと同期させることができることを意味し、その結果、アニメーションがスムーズになります。また、ブラウザがアニメーションを最適化し、CPUの使用量を削減し、パフォーマンスを向上させることができます。
DevToolsのパフォーマンスパネルは、アニメーションライフサイクルでの時間消費の詳細な内訳を提供します。このデータを分析することにより、パフォーマンスのボトルネックを特定し、それに応じてアニメーションを最適化できます。たとえば、描画に多くの時間が費やされている場合は、アニメーションが描画操作をトリガーしないプロパティを検討することをお勧めします。
レイアウトジッターとは、DOMの変更によりブラウザがレイアウト情報を繰り返し計算する必要がある状況を指します。これは、CSSアニメーションのパフォーマンスに深刻な影響を与える可能性があり、アニメーションがゆっくりと実行されるか、st音を引き起こします。レイアウトジッターを避けるために、DOMの読み取りと書き込み操作を一緒にバッチして、アニメーションを避けて公開操作のプロパティをトリガーしてみてください。
will-change属性を使用してアニメーションのパフォーマンスを向上させる方法は？ will-changeプロパティを使用すると、アニメーションを計画するプロパティの前にブラウザに通知できます。これにより、アニメーションが開始される前に、ブラウザが必要な最適化を実行できるため、アニメーションがスムーズになる可能性があります。ただし、ブラウザがより多くのリソースを消費し、パフォーマンスにマイナスの影響を与える可能性があるため、will-change属性は注意して使用する必要があります。
（上記のすべてのリンクを実際のリンクに置き換える必要があることに注意してください）
以上がCSSの最適化：DevToolsでアニメーションパフォーマンスを微調整しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
