ブラウザは、HTMLとCSSをDOMとCSSOMに解析し、レンダリングツリーに組み合わせてレイアウトを?qū)g行し、要素ジオメトリ、ピクセルのペイント、および合成レイヤーを計算することにより、Webページをレンダリングします。 2。パフォーマンスを最適化するには、重要なCSSを挿入し、非必須JavaScriptを延期することにより、レンダリングブロッキングリソースを最小限に抑えます。 3.スタイルが変更された直後にレイアウトプロパティをクエリしないように、読み取り/書き込み操作をバッチすることにより、強制的な同期レイアウトを避けます。 4.ウィルチェンジまたは変換および塗裝が多い特性を回避して、アニメーション化された要素を獨自のコンポジタレイヤーに宣伝することにより、塗裝コストを削減します。 5.レイアウトやペイントではなく、合成のみをトリガーする変換と不透明度を使用して、スムーズなアニメーションを確保します。 6. devtoolsを使用してレイヤーを検査し、レンダリングパスを最適化します。高速レンダリングの鍵は、レイアウトと塗裝作業(yè)を最小限に抑え、効率的な合成を可能にすることです。

Webページを開くと、コンテンツが表示されるように見えますが、舞臺裏では、ブラウザは畫面上のピクセルにコードを変えるために多くの作業(yè)を行っています。ブラウザのレンダリングパイプラインを理解することで、より速く、よりスムーズなWebアプリケーションを書き込むことができます。これがそれがどのように機能するか、そしてそれを最適化するために何ができるかの実際的な內(nèi)訳です??。

ブラウザがコードをピクセルに変える方法

高いレベルでは、ブラウザはいくつかの手順を経て、ウェブページを表示します。

1. HTMLをDOMに解析する（ドキュメントオブジェクトモデル）
2. CSSをCSSOM（CSSオブジェクトモデル）に解析する
3. DOMとCSSOMをレンダリングツリーに組み合わせます
4. レイアウト（リフロー） ：要素の位置とサイズを計算します
5. ペイント：各視覚部品のピクセルを入力します
6. コンポジット：塗裝部品を効率的にレイヤーします

各ステップを通過して、パフォーマンスにとって最も重要なことを見てみましょう。

1。ParseHTMLおよびCSS：レンダリングツリーの構(gòu)築

ブラウザは、HTMLをダウンロードし、ページのコンテンツを表すツリー構(gòu)造であるDOMに解析することから始まります。解析するため、CSSファイルなどのリンクされたリソースも取得します。

CSSはCSSOMに解析されます。これには、すべてのスタイリングルールが含まれています。 DOMとは異なり、CSSOMはレンダリングブロッキングです。ブラウザは、少なくとも部分的に構(gòu)築されるまで何もレンダリングしません。

?実際のヒント：レンダリングブロッキングリソースを最小限に抑えます。 CSSリンク（たとえば、 print ）でmedia屬性を使用して、ブラウザーが初期畫面に影響しないことを知っています。倍以上のコンテンツの重要なCSS。

DOMとCSSOMの両方が準備が整うと、ブラウザはそれらをレンダリングツリーに結(jié)合します。これは、目に見える要素と計算されたスタイルのリストです。 scriptタグのような要素は、解析を一時停止できるため、配置が重要です。

nives回避： の大規(guī)模な同期JavaScript。 HTML解析のブロックを防ぐために、 asyncまたはdefer使用します。

2。レイアウト：ジオメトリの計算

これで、ブラウザは何を表示する必要があるか、どのようにスタイリングされるかを知っています。次のステップはレイアウト（リフローとも呼ばれます）です。各要素が畫面上の場所と大きさを正確に把握します。

このプロセスは再帰的です。親のサイズは子供に影響し、逆もまた同様です。通常、レイアウトは次の場合にトリガーされます。

• DOMの変更（例えば、要素の追加/削除）
• ジオメトリの変化に影響するスタイル（例えば、 width 、 margin 、 display ）
• offsetHeightやgetBoundingClientRect()などのレイアウト依存性プロパティをクエリします

??警告：JavaScriptのレイアウトプロパティへのアクセスは、レイアウトスラッシングを引き起こす可能性があります - 繰り返し再計算。次のようなパターンを避けてください：

 div.style.height = div.offseTheigh 10 'px'; //レイアウトをトリガーします
div.style.width = div.offsetwidth 10 'px'; //再度レイアウトをトリガーします

?修正：バッチが読み取り、書き込みます：

 const height = div.offsetheight; //一度読んでください
div.style.height = height 10 'px';
div.style.width = height * 2 'px'; //値を再利用します

3。ペイント：ピクセルを埋めます

レイアウト後、ブラウザはペイントに移動します。レンダリングツリーを?qū)g際のピクセルに変換します。これは複數(shù)のレイヤーで発生します。

• 文章
• 色と境界線
• 影
• 背景
• 畫像

複雑なグラフィックス操作が含まれるため、塗裝は高価です。ブラウザは、多くの場合、コンテンツをペイントレイヤーに分割して更新を最適化します。

?最適化： will-changeまたはtransform: translateZ(0) （ただし、控えめに使用します）。これにより、小さな部品のみが変更された場合、ページ全體を塗り直すことができません。

box-shadowやbackground-imageなどのペイントが多いプロパティをアニメーション化しないでください?？赡埭扦ⅳ欷小?transformとopacityに固執(zhí)します。レイアウトとペイントをスキップします。

4。Composite：最終畫像の階層化

最後に、ブラウザは、塗裝された層を正しい順序で合わせて、最終的な畫面畫像を作成します。このステップは、可能であればGPUで発生し、非常に速くなります。

最新のブラウザは、レイアウトとペイントとは無関係に複合しようとします。そのため、 transformとopacityを使用したアニメーションはスムーズです。合成のみが必要です。

bestベストプラクティス： leftまたはtopの代わりにアニメーションtransform 。例えば：

 / *?レイアウトとペイントをトリガーします */
.move {左：50px; }

/ * compositeのみをトリガーします */
.move {transform：translatex（50px）; }

DevTools（Chrome： Layers Tab ）のレイヤーを検査して、ページがどのように構(gòu)成されているかを確認できます。

すべてをまとめる：パフォーマンスのヒント

レンダリングパイプラインを効率的に保つ方法は次のとおりです。

• 重要なレンダリングパスの長さを最小限に抑える：

  • CSS/JSの往復回數(shù)を減らします
  • インラインクリティカルCSS
  • 非必須JSを延期します

• 強制同期レイアウトを避けてください：

  • スタイルを変更した直後にレイアウトプロパティを読まないでください
  • DOMアップデートには、 requestAnimationFrameを使用します

• スムーズなアニメーションに最適化：

  • transformとopacityを使用します
  • will-change: transform

• ペイントエリアを減らす：

  • overflow: hidden絵畫を含む
  • 大きく複雑な背景を避けてください

• ブラウザのレイヤーシステムを活用してください。

  • 新しいレイヤーをトリガーするものを理解してください
  • will-changeを使いすぎないでください - 余分なメモリを使用できます

レンダリングパイプラインを理解することは、パフォーマンスオタクだけではありません。これは、高速で応答性の高いWebサイトを構(gòu)築するために不可欠です。重要なのは、レイアウトと塗裝段階での作業(yè)を最小限に抑え、合成のみを必要とする変更を目指すことです。

基本的に： DOMの変更が少なく、よりスマートなCSS、アニメーションが正しく行われます。

そして、それがあなたのページがコードから畫面へと進む方法です - あなたがそれを許可するならば、効率的に。

以上がブラウザのレンダリングパイプラインの実用的なガイドの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。