Stick to compositor-only properties and manage layer count

コンポジットは、ページのペイント部分を画面に一緒に置かれている場所です。

TL;DR

  • アニメーションの形状と不透明度の変更に固執します。
  • 移動要素を will-change または translateZ でプロモートします。
  • プロモーション ルールを乱用しないでください。レイヤーはメモリーと管理を必要とします。

ページのパフォーマンスに影響を与える 2 つの重要な要因があります。管理対象となる必要コンポジタ レイヤーの数と、アニメーションのために使用するプロパティです。

形状と不透明度の変更をアニメーションにしようしてます

ピクセル パイプラインの最適パフォーマンス バージョンは、レイアウト、ペイントの両方を回避し、コンポジットの変更だけを要します。

レイアウトまたはペイントなしのピクセル パイプライン。

これを達成するために、コンポジタで扱うことができる変化の特性に固執する必要があります。 現在はtransforms およびopacityの 2 つのプロパティだけがあります。

プロパティは、レイアウトやペイントを起動することなく、アニメーション化することができます。

形状と不透明度を使用するための注意点は、これらのプロパティを変更するに要素が自身コンポジタのレイヤーでなければならないということです。 レイヤーを作成するためには、次の要素をプロモートしなければなりません。

アニメーション化する要素をプロモート

Simplify paint complexity and reduce paint areas”セクションで説明したように、独自のレイヤーにアニメーション化する要素をプロモートしますが、合理的な範囲に留めてください。

.moving-element {
  will-change: transform;
}

あるいは、古いブラウザまたは will-change をサポートしていないブラウザ:

.moving-element {
  transform: translateZ(0);
}

これにより、ブラウザに変更予定を伝え、変更予定の内容に応じて、ブラウザはコンポジタ レイヤーの作成など、事前警告を与えます。

レイヤーを管理し、レイヤーの破裂を避ける

それはおそらく魅力的ですが、レイヤーは多くの場合パフォーマンスを助けることを理解し、次のものを使用してページ上のすべての要素をプロモートします。

* {
  will-change: transform;
  transform: translateZ(0);
}

つまり、ページ上のすべての単一の要素をプロモートするということです。 ここでの問題は、作成したすべてのレイヤーは、メモリーおよび管理を必要とすることであり、それは無料ではありません。 実際には、限られたメモリーの端末におけるパフォーマンスへの影響は、これまでレイヤーを作成するための利益を上回ることがあります。 すべてのレイヤーのテクスチャは GPU にアップロードする必要があるため、CPU と GPU、および GPUのテクスチャの使用可能なメモリー間の帯域幅の面でさらなる制約が生じます。

要するに、不必要に要素をプロモートしてはいけません.。

Chrome DevTools を使用してアプリのレイヤーを理解する

アプリ内の各レイヤーを理解し、その要素がなぜレイヤーを有しているかを知るために、Chrome DevTools の Timeline でペイント プロファイラを有効にする必要があります。

Chrome DevTools のペイント プロファイラ用のトグル。

切り替えると記録を取ることができます。 記録が終了したら、個々のフレームをクリックすることができるようになります。これは frames-per-second バーと詳細の間にあります。

フレーム開発者は、プロファイリングに関心があります。

これをクリックすると、新しいオプションの詳細が提供されます: レイヤー タブ。

レイヤー タブ ボタンは Chrome DevTools にあります。

このオプションでは新しいビューが表示されます。これによって、各レイヤーが作成された理由とともに、フレームの間に全てのレイヤーをパン、スキャン、およびズームインすることができます。

Chrome DevTools のレイヤー ビュー。

このビューを使用すると、すでにあるレイヤーの数を追跡することができます。 スクロールやトランジションなどのパフォーマンスが重要なアクションの間に合成に多くの時間を費やしている場合 (目標は4-5 ミリ秒)、この情報を使用して、自分のアプリでレイヤ数を管理することができます。