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

コンポジットは、画面に表示するために、ページのペイントされた部分がまとめて置かれている場所です。

Paul Lewis

コンポジットは、画面に表示するために、ページのペイントされた部分がまとめて置かれている場所です。

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

概要

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

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

最もパフォーマンスの高いピクセル パイプラインでは、レイアウトとペイントの両方を避け、コンポジットの変更のみを必要とします。

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

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

注: これらのプロパティだけにアニメーションを制限することができない場合は、FLIP principle を参照してください。より高価なプロパティから、形状と不透明度の変更にアニメーションを再マッピングするのに役立つ場合があります。

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

「ペイントの複雑さの簡略化とペイントエリアの縮小」セクションで説明したように、アニメーション化する要素をそれら自身のレイヤーにプロモートする必要があります（合理的な範囲にとどめてください）。

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

これがオンになっている場合、記録を実行する必要があります。記録が終了したら、frames-per-second バーと詳細の間にある個々のフレームをクリックできるようになります。

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

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

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