コンポジタ専用プロパティを使用し、レイヤ数を管理する

コンポジットは、ページのペイントされた部分を組み合わせて画面に表示することです。

Paul Lewis

コンポジットは、ページのペイントされた部分がまとまって 画面に表示されます

この領域には、ページのパフォーマンスに影響する重要な要素が 2 つあります。管理する必要があるコンポジタ レイヤの数と、アニメーションに使用するプロパティです。

概要

• アニメーションでは、形状と不透明度の変更に注意します。
• will-change または translateZ を使用して、移動要素をプロモートします。
• プロモーション ルールを過度に使用しないでください。メモリと管理が必要です。

アニメーションに形状と不透明度の変更を使用する

最もパフォーマンスの高いバージョンのピクセル パイプラインでは、レイアウトとペイントの両方を回避し、変更の合成のみが必要になります。

これを実現するには、コンポジタだけで処理できるプロパティの変更に固執する必要があります。現在、これに該当するプロパティは transform と opacity の 2 つだけです。

transform と opacity を使用する際の注意点は、これらのプロパティを変更する要素は、そのコンポジタ レイヤ上にある必要があるということです。レイヤを作成するには、要素をプロモートする必要があります。これについて次に説明します。

注: これらのプロパティだけにアニメーションを制限することが難しい場合は、FLIP の原則をご覧ください。高価なプロパティからの変換と不透明度の変化にアニメーションを再マッピングできる場合があります。

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

「ペイントの複雑さを簡素化し、ペイント領域を減らす」で説明したように、セクション内で、アニメーション化する要素は、無理のない範囲で）独自のレイヤにプロモートする必要があります。

.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 でペイント プロファイラを有効にする必要があります。タイムライン:

これをオンにすると、録画を行えるようになります。録画が完了すると、個々のフレームをクリックできるようになります。これは、fps のバーと詳細の間にあります。

これをクリックすると、詳細に新しいオプションとして [レイヤ] タブが表示されます。

このオプションを選択すると、新しいビューが表示され、そのフレーム中にすべてのレイヤをパン、スキャン、ズームインでき、各レイヤが作成された理由も示されます。

このビューを使用して、所有しているレイヤの数を追跡できます。スクロールや遷移などのパフォーマンスが重要なアクションで合成に多くの時間を費やす場合（4 ～ 5 ミリ秒を目安に）、この情報を使用すると、レイヤ数や作成された理由を確認したり、そこからアプリのレイヤ数を管理したりできます。