コンポジットとは、画面上に表示するために、ページのペイントされた部分をまとめる場所です。
コンポジットでは、画面に表示するために、ページのペイントされた部分がまとめられます。
この領域には、ページのパフォーマンスに影響を与える 2 つの重要な要素があります。管理する必要があるコンポジタ レイヤの数と、アニメーションに使用するプロパティです。
まとめ
- アニメーションの変形と不透明度の変更を維持します。
- 移動要素を
will-change
またはtranslateZ
でプロモートします。 - プロモーション ルールを過剰に使用しないでください。レイヤにはメモリと管理が必要です。
アニメーションに変形と不透明度の変更を使用する
最もパフォーマンスの高いバージョンのピクセル パイプラインでは、レイアウトとペイントの両方を回避し、変更を合成するだけで済みます。
![レイアウトもペイントも行われないピクセル パイプライン。](https://web.dev/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-pixel-pipeline-no-la-96825803c8cec.jpg?authuser=7&hl=ja)
これを実現するには、コンポジタだけで処理できるプロパティの変更だけを行う必要があります。現在、この条件が当てはまるプロパティは transform
と opacity
の 2 つだけです。
![レイアウトまたはペイントをトリガーせずにアニメーション化できるプロパティ。](https://web.dev/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-properties-can-anima-100ed2c7d26a4.jpg?authuser=7&hl=ja)
transform
と opacity
を使用する場合の注意点は、これらのプロパティを変更する要素が独自のコンポジタ レイヤ上にある必要があることです。レイヤを作成するには要素をプロモートする必要がありますが、これについては次に説明します。
アニメーション化する要素をプロモートする
「ペイントの複雑さを簡素化し、ペイント領域を縮小する」セクションで説明したように、アニメーション化する要素を(無理のない範囲で)独自のレイヤにプロモートする必要があります。
.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 のペイント プロファイラの切り替えボタン。](https://web.dev/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-toggle-the-paint-pro-0bfd1048bb7de.jpg?authuser=7&hl=ja)
アプリケーション内のレイヤについて理解し、要素にレイヤがある理由を把握するには、Chrome DevTools のタイムラインでペイント プロファイラを有効にする必要があります。
この機能がオンになっている場合は、録画してください。録画が終了すると、フレーム/秒バーと詳細の間にある個々のフレームをクリックできるようになります。
![デベロッパーがプロファイリングに関心を持つフレーム。](https://web.dev/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/a-frame-developer-is-int-195784f471018.jpg?authuser=7&hl=ja)
これをクリックすると、詳細に新しいオプション [レイヤ] タブが表示されます。
![Chrome DevTools のレイヤタブボタン。](https://web.dev/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-layer-tab-button-chr-b74ebc86acad5.jpg?authuser=7&hl=ja)
このオプションを選択すると、そのフレームの間にあるすべてのレイヤをパン、スキャン、ズームインできる新しいビューと、各レイヤが作成された理由が表示されます。
![Chrome DevTools のレイヤビュー。](https://web.dev/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-layer-view-chrome-de-04740f747ced7.jpg?authuser=7&hl=ja)
このビューを使用して、持っているレイヤの数を追跡できます。スクロールや遷移など、パフォーマンスが重要なアクション(4 ~ 5 ミリ秒程度を目標にする)の合成に多くの時間を費やしている場合は、この情報を使用して、レイヤの数と作成された理由を確認し、そこからアプリのレイヤ数を管理できます。