1.ブラウザレンダリングの復習

layout - paint - composition

Layout:要素ジオメトリを検索するプロセス.位置とサイズを計算します.
paint:スタック順(z-index)に画面にレイアウトツリーを描画するには.図面フェーズには、グリッド化(指定された情報をピクセルで画面に印刷)が含まれます.
composition(合成):分離可能な各層を分離処理して合成する.Main Threadから飛び出し、他のThread flowを使用して画面上で更新できます.すなわち,非同期運転後,既存のレイヤに合成する.

了解layer

レイヤーとは、ページの一部を分解し、他のレイヤーとは独立してグリッド化したり変換したりすることができます.複数のレイヤを設定することで、変更されたレイヤを管理し、パフォーマンスを最適化します.

以上の画像は、ブラウザが画面をレンダリングする方法です.これは合成されていない単層レンダリング方式です.下にスクロールして、変更したビューポートと同じ余白を作成します.この空白を再グリッド化して動作させた.

モダンブラウザは、1ページの部分を合成して複数のレイヤに分割し、これらのレイヤをそれぞれ等級別に並べて、合成スレッドでページを合成するように操作します.必要に応じて、演算を最小限に抑えるために、小さなレイヤまたはビューポートのみを移動します.

2.ブラウザレンダリングの最適化

CSS will-changeプロパティを使用してレイヤーを分離

DOM APIに頻繁に変更する必要がある要素ノードがある場合は、レイヤをすべての部分だけを変更するように分割することが望ましい.CSSのwill-changeプロパティを使用して新しいレイヤを作成し、既存のレイヤから分離します.
メモリ割り当てを含む管理レイヤが必要であるため、will-changeプロパティを使用してレイヤを追加する場合は注意してください.適時に運用しないとかえって悪影響を及ぼす.

レイアウトを生成しないCSSプロパティの使用

CSS Triggers Webサイトでは、CSSプロパティがレイアウト、paint、compositionでトリガーされるステップを示します.
layoutとpaintを必要としないCSSプロパティを変更し、ブラウザが合成ステップのみを実行するようにすると、レンダリングの最適化に役立ちます.

たとえば、top/righ/left/bottomを使用して位置を変更するよりも、変換を使用します.前者はlayout-paint-compositeの3段階を経たが,transformはcomposite段階のみを行ったからである.

image lazy loading

	<img loading="lazy" src="something" />

HTML <img>タグのloadingプロパティ値がlazyであることを指定すると、画像がビューポートに入る一定の距離内にある場合にのみ、画像が読み込まれます.初期ロード時間を短縮します.

3.開発者ツールの利用

パフォーマンスの検証

<開発者ツール>-<パフォーマンス>タブでは、ブラウザのパフォーマンスをrecordで表示できます.注意赤で表示された警告部分は、問題を解決するように問題を解決します.16.6ミリ秒60 fpsのパフォーマンスを維持し、良好なユーザー体験を提供することを選択します.ctrl + shift + pを使用して開発ツールパレットを開き、[レンダリング](Rendering)[レイアウトを表示](Show Layout)[シフト領域](Shift Area)を使用して、サイト内のどの操作がレイアウトをもたらすかを直感的に確認します.layoutステップを省略できるシナリオを探して最適化します.

Reference

モダンWebブラウザブラウズセクション3
レンダーのパフォーマンス(Render Performance)
Reflow、Repaint Chromumの観点から(なぜ変換が早いのか?)
ChromCompositionとLayer
Lifa of a pixel
ブラウザの表示と最適化