Web パフォーマンスをマスターする: ピクセル パイプラインを理解する

Web 開発者、特にフロントエンド開発を専門とする私たちにとって、ブラウザの仕組み、Web 上の通信プロトコル、Web アクセシビリティなどを理解することが不可欠です。

今回は、Web サイトのパフォーマンスを向上させ、ユーザー エクスペリエンスを向上させるために留意すべき点を共有します。これは Pixel Pipeline についてです。

ピクセルパイプラインとは何ですか?

ピクセル パイプラインは、Web ブラウザーが HTML、CSS、JavaScript を画面上に表示されるビジュアル要素に変換する方法を記述するプロセスです

Web 開発者としての仕事において、知っておき、考慮すべき主な領域が 5 つあります。これらの 5 つの領域は、画面へのピクセル パイプラインのキー ポイントを表します。

JavaScript: JavaScript は通常、ユーザー インターフェイスに視覚的な変更をもたらす作業を処理するために使用されます。たとえば、これは jQuery のアニメーション関数、データセットの並べ替え、またはページへの DOM 要素の追加などです

スタイル計算: これは、一致するセレクターに基づいて、どの CSS ルールがどの HTML 要素に適用されるかを判断するプロセスです。たとえば、.headline は、見出しのクラスを含む class 属性値を持つ任意の HTML 要素に適用される CSS セレクターの例です。

レイアウト: ブラウザーは、要素に適用されるルールを認識すると、要素が占めるスペースの量や要素が画面上のどこに表示されるかなど、ページのジオメトリの計算を開始できます。

ペイント: ペイントはピクセルを埋めるプロセスです。これには、ページ上のレイアウトが計算された後に、テキスト、色、画像、境界線、影、および要素の基本的にあらゆる視覚的側面を描画することが含まれます。

コンポジット: ページの一部は複数のレイヤーに描画される可能性があるため、ページが期待どおりにレンダリングされるように、正しい順序で画面に適用する必要があります。

上記のことを理解すると、要素のサイズを変更するアニメーションのリソース コストを理解できます。これには、レイアウト プロセス、ペイント プロセス、最後に作成プロセスに戻る必要があります。

一方、テキストの色や要素の背景色の変更を含むアニメーションを作成するには、ペイント プロセスに進み、次に作成プロセスに進むだけです。

Web サイトのパフォーマンスを向上させ、ユーザー エクスペリエンスを向上させるための推奨事項

i) 可能な限り、あまり多くのアニメーションを作成しないようにしてください。
ii) アニメーションが必要な場合は、アニメーション化するときに変換プロパティと不透明度プロパティに制限します。これらのプロパティは、ピクセル パイプラインの最後のステップである Compose プロセスを通過するだけでよいためです。例: hover 擬似クラスを使用してボタンをアニメーション化する場合、背景色を変更するよりも不透明度を使用することをお勧めします。
iii) アニメーションの一部として要素を移動したい場合は、'will-change' または 'transform' プロパティとその翻訳値を使用することをお勧めします。

この投稿のベースとなった出典:
https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count?hl=es
https://web.dev/articles/rendering-performance

パフォーマンスに関連するあらゆる分野の専門エンジニアであり、Lighthouse (Google Lighthouse は Web ページの品質を測定するためのオープンソースの自動ツール) の作成者である Paul Lewis が教えるブラウザ レンダリングの最適化に関する無料コースChrome DevTools:
https://www.udacity.com/course/browser-rendering-optimization--ud860

以上がWeb パフォーマンスをマスターする: ピクセル パイプラインを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。