WebブラウザはどのようにHTMLドキュメントをレンダリングしますか

ブラウザは、BYTESが受信されると、HTMLをDOMツリーに分類します。 2。CSSやJavaScriptなどの外部リソースは非同期にロードされ、CSSはレンダリングブロッキングであり、通常のJavaScriptはパーサーブロッキングです。 3。CSSは、domと組み合わせることでレンダリングツリーを形成するスタイリングルールのツリーであるCSSOMに解析されます。 4.レンダリングツリーは、目に見える要素とその計算されたスタイルのみを使用して構築されます。 5。レイアウト（またはリフロー）は、ルートから始まる各要素の正確な位置とサイズを計算します。 6.絵画は、レイヤーにテキスト、色、境界、その他の視覚要素を描画することにより、レンダリングツリーをピクセルデータに変換します。 7。Compositingは、これらのレイヤーを正しい順序で組み合わせて、最終画面画像を効率的に生成します。レンダリングパイプライン全体（ツリーの構築、レイアウト、塗装、合成）がミリ秒単位で発生し、迅速でインタラクティブなWebページを可能にします。

Webページを開くと、ブラウザは一連の手順を実行して、RAW HTML（およびCSSやJavaScriptなどの関連リソース）を完全にレンダリングされたインタラクティブページに変換します。このプロセスは、レンダリングパイプラインと呼ばれます。 WebブラウザがHTMLドキュメントをレンダリングする方法は次のとおりです。

1。HTMLをDOMに解析します

最初のステップは、HTMLファイルを読み取り、それを構造化された形式に変換することです。ブラウザは、ドキュメントオブジェクトモデル（DOM）で動作することができます。

• ブラウザはHTMLバイトをBYTEで読み取り、トークン（ <div> 、 <code> 、属性、テキストなど）に解析します。
• 次に、これらのトークンはノードに変換され、ノードはDOMツリーと呼ばれるツリー構造に編成されます。
• DOMはドキュメントの構造とコンテンツを表し、JavaScriptからアクセスできます。

注：DOMは徐々に構築されています。 HTMLのチャンクがダウンロードされるとすぐに、解析が開始されます。ファイル全体を待ちません。



---

2。外部リソースのロード

HTMLを解析する間、ブラウザは外部リソースへの参照に遭遇します。

• CSSファイル（ <link rel="stylesheet"> ）
• JavaScriptファイル（ <script src="..."></script> ）
• 画像、フォントなど

これらは非同期に（並行して）ダウンロードされますが、：


• CSSはレンダリングブロッキングです。ブラウザは、スタイルがレイアウトに影響するため、CSSが解析されるまでレンダリングを待ちます。
• JavaScriptはパーサーブロッキングです（デフォルト） ：パーサーが通常の<script></script>タグにヒットすると、スクリプトがasyncまたはdefer使用しない限り、HTMLの解析を一時停止してスクリプトを取得して実行します。

---

3。CSSの解析とCSSOMの構築

ブラウザは、CSSをCSSオブジェクトモデル（CSSOM）にCSS（外部ファイル、 <style></style>タグ、またはインラインスタイルから）に分類します。

• CSSOMは、CSSを要素にマッピングする木のような構造です。
• DOMとは異なり、CSSOMは公開されていませんが、要素のスタイルの方法を決定します。
• また、レンダリングブロッキングです。つまり、CSSOMの準備が整うまでブラウザは何もペイントしません。

一緒に、domとcssomはレンダリングツリーを形成します。

---

4.レンダリングツリーの構築

ブラウザはDOMとCSSOMを組み合わせてレンダリングツリーを作成します。

• 目に見える要素のみが含まれます（例： display: noneまたは<script></script> 、 <meta>を除外）。
• レンダリングツリーの各ノードには、スタイルを計算しました（継承、カスケードなどを解決した後）。
• このツリーは、実際に画面に塗装されるものを表しています。

---

5。レイアウト（リフロー）

ブラウザがどの要素をレンダリングするかとそのスタイルを知っているので、計算します。

• 各要素がページ（位置、サイズ）に表示される場合。
• このプロセスは、レイアウトまたはリフローと呼ばれます。
• レンダリングツリーのルート（通常は要素）から始まり、各ノードのジオメトリを再帰的に計算します。

このステップは、特に複雑なレイアウトの場合、計算的に高価です。

---

6。絵画（ラスター化）

レイアウト後、ブラウザはピクセルをペイントします。

• レンダリングツリーはレイヤーに分解されます。
• 各レイヤーは、メモリのビットマップ（ピクセルベースの画像）に塗装されています。
• これには、テキスト、色、境界、影などを描くことが含まれます。
• 最新のブラウザは、パフォーマンスのためにコンテンツを複数のレイヤーに分割する場合があります（例： will-changeまたはtransformを使用）。

---

7。合成

最後に、ブラウザは塗装されたレイヤーを複合します。

• 最終的な画面画像を形成するために、レイヤーが正しい順序で描画されます。
• このステップは、重複する要素、透明性、Zインデックスなどを処理します。
• 変更されたレイヤーのみが再塗装または再構成されるように最適化されています（たとえば、アニメーション中）。

---

ボーナス：JavaScriptの影響

JavaScriptは、このプロセス全体を中断または変更できます。

• スクリプトは、DOMとCSSOMを読み取るか変更できます。
• window.getComputedStyle()などのメソッドを呼び出すか、 offsetHeightにレイアウトを同期させるように強制します。

---

レンダリングパイプラインの概要

1. parse html→ビルドDOM
2. CSSを解析→CSSOMを構築します
3. dom cssom→レンダリングツリーを組み合わせます
4. レイアウト：ジオメトリを計算します
5. ペイント：ピクセルに変換します
6. composite：層と表示最終出力

---

このプロセス全体は、多くの場合ミリ秒で非常に迅速に発生し、変更が発生するたびに繰り返すことができます（例、ユーザーインタラクション、JavaScriptの更新）。このフローを理解することで、開発者はより速く、より効率的なWebページを書き込むことができます。

基本的に、レンダリングは、コードを見て対話できるものに変えるブラウザの方法です。