サイトやアプリがうまく機能していないとユーザーは気づくため、レンダリング パフォーマンスの最適化は非常に重要です。
今日のウェブ ユーザーは、アクセスするページがインタラクティブで、 時間と労力を重点的に投入する必要があります ページの読み込みが速いだけでなく、ユーザー入力への反応も速いことが望まれます ライフサイクル全体を通して 利用できますユーザーエクスペリエンスのこの側面は これは、まさに [Interaction to Next Paint（INP）] 指標の測定値です。良い INP はユーザーのリクエストに対してページが一貫して確実に できます。
ページをテンポよく見せる主な要素は、 ユーザーの操作に応じて実行する JavaScript、 ユーザー インターフェースの視覚的な変更です。ユーザーの視覚的な変更 インターフェースはいくつかの種類の作業の結果であり、 レンダリングする必要があります。また、この作業はできるだけ早く実行し、 ユーザーエクスペリエンスが高速で 信頼できると感じられます
ユーザーの操作にすばやく反応するページを作成するには、 HTML、JavaScript、CSS がブラウザで処理される仕組みと、 記述したコードだけでなく、コードに含まれるサードパーティのコードも、 行いました
デバイスのリフレッシュ レートに関する注意事項
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">今日のほとんどのデバイスでは、画面が 1 秒に 60 回更新されます。更新のたびに は、目に見える視覚的な出力を生成します。これは一般に「フレーム」と呼ばれます。 次の動画では、フレームの概念について説明します。
<ph type="x-smartling-placeholder">デバイスの画面は常に一貫した頻度で更新されますが、 常に十分な数のフレームを生成できるとは限らない リフレッシュレートと一致しますたとえば、アニメーションやトランジションがある場合に、 デバイスのリフレッシュ レートに合わせてブラウザが 更新頻度が高くなります。
一般的なディスプレイは毎秒 60 回更新されると仮定すると、 ブラウザが各フレームを生成するのに 16.66 ミリ秒かかることがわかります。 しかし実際には、ブラウザにはフレームごとに独自のオーバーヘッドがあるため、 処理は 10 ミリ秒以内に完了する必要があります。失敗しても フレームレートが低下し、ページ コンテンツの揺れが画面に表示されます。この この現象はよくジャンクと呼ばれます。
ただし、目標は取り組もうとしている仕事の種類によって異なります。 アニメーションでは、10 ミリ秒のしきい値を満たすことが不可欠です。 間にある一連のフレームで補間が行われ、 あります。ユーザー インターフェースの個別の変更 間に動きがない状態から状態へと移動します。 こうした変更は、すぐに感じられる時間枠で達成することが推奨されます。 できます。このような場合、よく引用される数値が 100 ミリ秒ですが、 INP 指標が「良好」の場合200 ミリ秒以下に設定する必要があります 多様な機能を備えた幅広いデバイスに対応します。
目標が何であれ、アニメーション化する多くのフレームを ジャンクを避けるために、あるいは単に個別の視覚的変化を つまり、ブラウザのピクセルがどのように 作業には不可欠です
ピクセル パイプライン
このプログラムでは主に 5 つの重要な分野について知っておくべき、 ウェブデベロッパーとして働いていますこの 5 つの領域で特によく それぞれがピクセルから画面へのパイプラインのキーポイントを表します。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">- JavaScript: JavaScript は通常、
ユーザーインターフェースの見た目が変わりましたたとえば、これは jQuery の
animate関数、データセットの並べ替え、ページへの DOM 要素の追加。 ただし、視覚的な変更をトリガーするのに JavaScript は必要ありません。CSS アニメーション、CSS 遷移、Web Animations API では、 アニメーション化します - スタイル計算: スタイル計算とは、どの CSS ルールが適切かを理解するプロセスです。
どの HTML 要素に、一致するセレクタに基づいて適用するかを指定します。たとえば
.headlineは、任意の HTML 要素に適用される CSS セレクタの例です。 クラスがheadlineのclass属性値。最低料金 認識されると、ルールが適用され、各ルールの最終的なスタイルが 計算されます。 - レイアウト: 要素に適用するルールをブラウザが認識すると、ブラウザで
ページのジオメトリの計算を開始します。たとえば、
画面上のどこに出現するかを指定できますウェブのレイアウト モデルでは、
影響を与える可能性があります。たとえば、
<body>要素は、通常、その子要素の寸法に影響します。 ブラウザにとって非常に複雑なプロセスになります。 - ペイント: ペイントはピクセルで塗りつぶすプロセスです。具体的には、 テキスト、色、画像、枠線、シャドウなど ページ上のレイアウトが計算された後の要素のアスペクト。 通常、描画は複数のサーフェス（レイヤとも呼ばれます）に対して行われます。
- 複合: ページの一部分がページに描画された可能性があるため 正しい順序で画面に適用する必要があります。 適切に表示されるかどうかを確かめる必要がありますこれは特に 他の要素と重なり合うため。誤りがあると 1 つの要素が表示される可能性があります。 重なり合わないようにします。
ピクセル パイプラインのこれらの各部分は、 アニメーションでジャンクが発生する、または個別のビジュアル要素であってもフレームの描画が遅延する 変更しました。したがって、これらの Pod について、 コードによってトリガーされるパイプラインの 部分を特定し、その部分を ピクセル パイプラインの必要な部分のみに変更を加え、 レンダリングします。
「ラスタライズ」という言葉は「Paint」と組み合わせて使用します。この 描画は、実際には次の 2 つのタスクだからです。
- 描画呼び出しのリストを作成する。
- ピクセルの塗りつぶし。
後者は「ラスタライズ」と呼ばれます。そのため、 DevTools では、ラスタライズを含むと考えてください。一部の 描画呼び出しのリストの作成、ラスタライズは デベロッパーが管理することはできません。
必ずしもすべてのフレームでパイプラインのすべての部分に影響するとは限りません。 実際、特定の状況でパイプラインが通常どのように機能するかは 3 つあります。 JavaScript、CSS、ウェブ リソースのいずれかを使って、 Animations API。
1. JS / CSS >スタイル >レイアウト >ペイント >複合素材
「レイアウト」を変更した場合は、プロパティ（たとえば、要素の
幅、高さ、その位置などのジオメトリ（left や top CSS など）
プロパティ）を指定し、ブラウザは他のすべての要素をチェックし、「リフロー」する必要があります。
できます。影響を受ける部分は再塗装し、最後に塗装する必要があります
複数の要素をもう一度合成する必要があります
2. JS / CSS >スタイル >ペイント >複合素材
「ペイントのみ」を変更した場合プロパティの一例です。たとえば、
background-image、color、box-shadow などのプロパティ（レイアウト ステップ）
ページの視覚的な更新を commit する必要はありません。レイアウトを省略する
可能な限り、コストのかかるレイアウト作業を行わずに済みます。
次のフレームの生成で大幅なレイテンシの原因となります。
3. JS / CSS >スタイル >複合素材
レイアウトもペイントも必要でないプロパティを変更すると、ブラウザは すぐに合成ステップに進みますこれは最も安価で 高圧力ポイントの 望ましい経路を ページのライフサイクル（アニメーションやスクロールなど）に関する変更です。豆知識: Chromium は コンポジタ スレッドのみで発生し、 つまり、ページが応答していなくても ページをスクロールして、以前に画面に描画された部分を確認できます。
<ph type="x-smartling-placeholder">ウェブ パフォーマンスは、作業を回避しつつ、効率を向上させるための技術 可能な限り自動化する必要があります多くの場合は 対抗するのではなく、この作業は 異なるのは、計算コストの点です。一部 その性質上、他のタスクよりも費用がかかります。
パイプラインのさまざまな部分を詳しく見ていきましょう。詳しく見ていきます 一般的な問題とその診断と修正方法を紹介します
ブラウザのレンダリングの最適化
ユーザーにとってパフォーマンスは重要です。優れたユーザー エクスペリエンスを構築するために、ウェブ デベロッパーは、 ユーザーの操作にすばやく反応し スムーズに行えますパフォーマンスのエキスパート Paul Lewis が、ジャンクと 60 フレーム/秒のパフォーマンスを維持するウェブ アプリケーションを作成できます。退出 アプリのプロファイリングに必要なツールを紹介し、アプリの レンダリングのパフォーマンスが最適化されません。また、ブラウザのレンダリングと構成についても パターンを明らかにして、より高速かつ高速に ユーザーが喜んで使うようになるでしょう。
これは Udacity が提供する無料のコースで、いつでも受講できます。