Rendering Performance

今日のウェブのユーザーは、ページにアクセスしたときにインタラクティブでスムーズであることに期待します。これが、時間と労力を集約すべき点です。 ページは迅速にロードされるだけでなく、円滑に実行されなければなりません。スクロールはフィンガー ティックで高速に、アニメーションとの相互操作は滑らかな絹のようであるべきです。

ユーザーのウェブサイトと相互操作。

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

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

今日のほとんどの端末は、画面を1 秒に 60 回リフレッシュします。 アニメーションやトランジションが実行されている場合、あるいはユーザーがページをスクロールしている場合、ブラウザは端末のリフレッシュ レートと一致し、これらの画面がそれぞれのリフレッシュについて、1 つの新しい画像またはフレームを受け持つ必要があります。

これらの各フレームのバジェットは 16 ミリ秒を少し上回ります (1秒 / 60 = 16.66 ミリ秒)。 しかし実際には、ブラウザはハウスキーピングを行う必要があり、すべての作業は10 ミリ秒以内に完了する必要があります。 このバジェットに合致しない場合は、フレームレートが低下し、画面上でコンテンツがジャダーを起こします。 これは多くの場合ジャンクと呼ばれ、ユーザー エクスペリエンスにマイナスの影響を及ぼします。

ピクセル パイプライン

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

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

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

パイプラインのこれらの各部分は、ジャンクを導入する機会を示すため、コードがトリガーするパイプラインの正確な部分を理解することが重要です。

常に各フレーム上のパイプラインのすべての部分に触れるとは限らないでしょう。 実際には、特定のフレームの視覚的な変更を行う際に通常は3 つの方法があります。JavaScript、CSS、またはアニメーションです。

1. JS / CSS > Style > Layout > Paint > Composite

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

「レイアウト」プロパティを変更して、幅、高さ、左または上の位置など、要素の形状を変化する場合、ブラウザは他のすべての要素と「リフロー」ページをチェックする必要があります。 影響する領域は再描画する必要があり、最終的なペイントの要素を一緒に合成する必要があります。

2. JS / CSS > Style > Paint > Composite

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

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

3. JS / CSS > Style > Composite

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

レイアウトもペイントも必要としないプロパティを変更すると、ブラウザは合成を行うためにジャンプします。

この最終バージョンは、アニメーションやスクロールなど、アプリのライフサイクルでプレッシャーの高い点において、最も安価となります。

パフォーマンスは作業を回避し、可能な限り効率的に作業をための技術です。 多くの場合、ブラウザ内で作業を行います。 パイプラインにおける上記の作業は、計算コストの点で高くつく場合もあることを念頭に置くことが重要です!

パイプラインのさまざまな部分について更に見ていきましょう。 一般的な問題と、それらの診断方法と修正方法についても見てみましょう。

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