レンダリング パフォーマンス

今日のウェブのユーザーは、ページにアクセスしたときにインタラクティブでスムーズであることを期待します。よって、この点に時間と労力を集約する必要があります。

ページのロードは迅速かつ滑らかでなければなりません。スクロールは指に吸い付いているかのように高速で行われ、アニメーションとインタラクションは絹のようになめらかであるべきです。

パフォーマンスのサイトとアプリを記述するには、HTML、JavaScript、および CSS がブラウザでどのように処理されるかを理解する必要があります。また、記述したコード (および他のサードパーティのコード) が、可能な限り効率的に実行されるようにしてください。

60fps および端末のリフレッシュ レート

ウェブサイトを操作するユーザー。

今日のほとんどの端末は、画面を 1 秒に 60 回リフレッシュします。アニメーションや遷移の実行中、あるいはユーザーがページをスクロールしている最中は、ブラウザ側で端末のリフレッシュ レートに合わせて、画面がリフレッシュされるたびに 1 つの新しい画像またはフレームを表示する必要があります。

これらの各フレームのバジェットは 16 ミリ秒を少し上回ります(1秒 / 60 = 16.66 ミリ秒)。しかし実際には、ブラウザはハウスキーピングを行う必要があり、すべての作業は 10 ミリ秒以内に完了する必要があります。

このバジェットに合致しない場合は、フレームレートが低下し、画面上でコンテンツが震えて見えます。 この現象は、一般的にジャンクと呼ばれ、ユーザー エクスペリエンスの低下につながります。

ピクセル パイプライン。

作業するときに留意すべき 5 つの主要な領域があります。 それらは最も制御力を持つ領域であり、ピクセルから画面へのパイプラインにおいてキーポイントとなります。

フル ピクセル パイプライン。

  • JavaScript。一般的に JavaScript は、視覚的変化をもたらす作業を処理するために使用されます。jQuery の animate 機能、データセットのソート、DOM 要素のページへの追加などです。これは、視覚的な変化をトリガーする JavaScript である必要はありません。CSS アニメーション、遷移、およびウェブ アニメーションの API が一般的に使用されます。
  • スタイルの計算。これは、CSS ルールがどの要素に一致するかを、マッチング セレクタなどに基づいて見つけ出すプロセスです。ルールが判明するとそれらが適用され、各要素の最終的なスタイルが算出されます。
  • レイアウト。ブラウザが要素に適用されるルールを認識すると、どのくらいのスペースが必要か、画面のどこにあるか、などを計算し始めます。ウェブのレイアウト モデルは、1 つの要素が他の複数の要素に影響を与える可能性があることを意味します。たとえば、<body> 要素の幅は一般的にその子の幅に影響を与え、かつツリーの上から下まで影響を与えます。このため、プロセスはブラウザにとって非常に複雑になります。
  • ペイント。ペイントはピクセルを書き込む処理です。この処理では、テキスト、色、イメージ、線、影など、実質上、要素の視覚的な部分すべての描画が行われます。描画は一般的に、レイヤーと呼ばれる複数の面で行われます。
  • コンポジット。ページのパーツは潜在的に複数のレイヤーに描かれているので、ページが正しくレンダリングされるように、正しい順序で画面に描画する必要があります。順序を間違えると、要素が誤った要素の上に表示される場合があるため、重なり合う要素の場合はこれが特に重要です。

パイプラインのこれらの各パーツは、ジャンクを引き起こす可能性があるため、コードがトリガーするパイプラインの正確な部分を理解することが重要です。

ペイントに関連して「ラスタライズ」という言葉を聞くことがあります。これは、ペイントは実際には 1) ドローコールのリストの作成、2)ピクセルでの埋め込みという 2 つのタスクから成るためです。

後者は「ラスタライゼーション」と呼ばれます。DevTools でペイント レコードを見たら必ず、ラスタライゼーションを含むものであると考えるべきです。 (一部のアーキテクチャでは、ドローコールのリストの作成とラスタライズが別のスレッドで実行されますが、これはデベロッパーが制御できることではありません。)

必ずしも、各フレーム上のパイプラインのすべてのパーツを操作するとは限りません。実際には、パイプラインで特定のフレームの視覚的な変更を行う際に通常は、JavaScript、CSS、またはウェブ アニメーションの 3 つの方法があります。

1. JS / CSS > スタイル > レイアウト > ペイント > コンポジット

フル ピクセル パイプライン。

「レイアウト」プロパティを変更して、幅、高さ、左または上の位置など、要素の形状を変更する場合、ブラウザは他のすべての要素をチェックして、ページを「リフロー」する必要があります。

影響を受ける領域は再ペイントする必要があり、ペイントされた最終要素をコンポジットして戻す必要があります。

2. JS / CSS > スタイル > ペイント > コンポジット

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

背景画像、テキストの色、影など、「ペイントのみ」のプロパティ、つまりページのレイアウトに影響を与えないプロパティを変更した場合、ブラウザはレイアウトをスキップしますが、ペイントは行われます。

3. JS / CSS > スタイル > コンポジット

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

レイアウトもペイントも必要としないプロパティを変更する場合、ブラウザはコンポジットのみを行うためにそれらをスキップします。

この最終バージョンは最も低コストで、アニメーションやスクロールといった、アプリのライフサイクルの中で負荷の高い時点に最適です。

注: 任意の CSS プロパティを変更すると上記の 3 つのバージョンのどれがトリガーされるかを知りたい場合は、CSS トリガーを参照してください。高性能のアニメーションへの高速トラックを実行したい場合は、コンポジタ専用プロパティの変更セクションをご覧ください。

パフォーマンスとは、負荷を回避することであり、あらゆる作業を可能な限り効率化することです。 多くの場合、これはブラウザと連携することであり、ブラウザに悪影響を与えるものではありません。 パイプラインにおける上記の処理は、計算コストが異なり、他のタスクに比べてコストが高いものもあることに注意してください。

パイプラインのさまざまなパーツについてさらに見ていきましょう。一般的な問題と、それらの診断方法と修正方法についてもご紹介します。

Browser Rendering Optimizations

Performance matters to users. Web developers need to build apps that react quickly and render smoothly. Google performance guru Paul Lewis is here to help you destroy jank and create web apps that maintain 60 frames per second performance. You'll leave this course with the tools you need to profile apps and identify the causes of jank. You'll explore the browser's rendering pipeline and uncover patterns that make it easy to build performant apps.

This is a free course offered through Udacity

Take Course