ペイントの複雑さの簡素化とペイントエリアの削減

ペイントとは、最終的にユーザーの画像に合成されるピクセルを塗りつぶす処理であるあります。多くの場合、これはパイプライン内のすべてのタスクの中で最も長く実行されるため、可能な限り避ける必要があります。

ペイントは、最終的に合成されるピクセルを塗りつぶす処理である ユーザーのあります。多くの場合、kube-APIserver のすべてのタスクの中で できる限り避けるべきものです

概要

  • 変換または不透明度以外のプロパティを変更すると、常にペイントがトリガーされます。
  • 多くの場合、ペイントはピクセル パイプラインの中で最も高価な部分です。できる限り避けてください
  • レイヤ プロモーションとアニメーションのオーケストレーションにより、ペイント領域を削減します。
  • Chrome DevTools のペイント プロファイラを使用して、ペイントの複雑さとコストを評価する。減らすことができます

Layout and Paint のトリガー

要素のジオメトリを変更すると、そのピクセルの修正が必要になるため、レイアウトをトリガーすると、常にペイントがトリガーされます。

完全なピクセル パイプライン。

背景、テキストの色、シャドウなどの幾何学的でないプロパティを変更した場合も、ペイントをトリガーできます。そのような場合、レイアウトは必要なく、パイプラインは次のようになります。

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

Chrome DevTools を使用してペイントのボトルネックをすばやく特定する

Chrome DevTools を使用して、ペイントされている領域をすばやく特定できます。[レンダリング] タブを開く 次に、[Paint Flashing] を有効にします。

Chrome でこのオプションをオンにすると、ペイントが行われるたびに画面が緑色で点滅します。画面全体が緑色で点滅している場合、または、画面上で塗装されるはずがない領域が点滅している場合は、さらに調査を進めてください。

ペイントが行われるとページが緑色で点滅します。

移動またはフェードする要素をプロモートする

ペイントは、必ずしもメモリ内の単一の画像に行われるとは限りません。実際、ブラウザは必要に応じて複数の画像やコンポジタ レイヤにペイントすることができます。

コンポジタ レイヤの表現。

このアプローチの利点は、定期的に再ペイントされる要素、または変換によって画面上を移動する要素を、他の要素に影響を与えることなく処理できることです。これは、図形描画、GIMP、Photoshop などのアート パッケージの場合と同じです。個々のレイヤを処理して合成することで、最終的な画像が作成されます。

新しいレイヤを作成するには、will-change CSS プロパティを使用することをおすすめします。これは Chrome、Opera、Firefox で動作し、値を transform に設定すると新しいコンポジター レイヤが作成されます。

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

will-change をサポートしていないが、Safari や Mobile Safari など、レイヤ作成のメリットがあるブラウザでは、3D 変換を（誤って）使用して新しいレイヤを強制的に作成する必要があります。

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

ただし、各レイヤにメモリと管理の両方が必要になるため、作成しすぎないように注意してください。詳しくは、コンポジタ専用プロパティに維持し、レイヤ数を管理するのセクションをご覧ください。

要素を新しいレイヤにプロモートした場合は、DevTools を使用してパフォーマンス上のメリットがあることを確認します。プロファイリングなしで要素をプロモートしないでください。

ペイントエリアを縮小する

ただし、要素をプロモートしていても、ペイント作業が必要な場合もあります。ペイントに関する問題の大きな課題は、ペイントが必要な 2 つの領域がブラウザによって結合され、その結果、画面全体が再ペイントされることです。たとえば、ページの上部に固定されたヘッダーがあり、画面の下部に何かがペイントされている場合、画面全体が再ペイントされる可能性があります。

ペイント領域を減らすのは、多くの場合、アニメーションと遷移をオーケストレートして重なりすぎないようにしたり、ページの特定の部分をアニメーション化しないようにする方法を見つけたりする場合です。

ペイントの複雑さを簡素化する

画面の一部を描画するのにかかる時間。

ペイントでは、コストが他のものよりも高くなることがあります。たとえば、ぼかしを含むもの（影など）は、たとえば赤いボックスを描画するよりも描画に時間がかかります。しかし、CSS の観点から見ると、これは必ずしも明白ではありません。background: red; と box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); は、パフォーマンス特性が大きく異なるように見えるとは限りません。

上のペイント プロファイラを使用すると、別の方法で効果を得る必要があるかどうかを判断できます。最終結果を得るために、より安価なスタイルや別の方法を使用できるかどうかを自問してください。

特にアニメーション中のペイントは常に避けることをおすすめします。特にモバイル デバイスでは、フレームあたりの 10 ミリ秒は、通常ペイント処理を完了するのに十分ではありません。