処理フロー

1.コンテンツをネットワーキング レイヤから取得

レンダリング エンジンが、「要求したドキュメントのコンテンツ」をネットワーキング レイヤから取得

---

2.HTML Parser → DOM Tree

レンダリング エンジンは、 HTML ドキュメントを解析して DOM Tree へ変換
・タグを「コンテンツ ツリー」というツリー内の DOM ノード（DOM Tree）に変換

HTML パーサーの役割
・HTML マークアップを解析して解析ツリーを作成すること

DOM とは？
・「Document Object Model」の略
・HTML ドキュメントや、HTML 要素と JavaScript などの外部世界とのインターフェースをオブジェクトで表現したもの

DOM の仕様は？
・HTML と同様に、標準化団体 W3C が策定
・ドキュメントの操作に関する全般的な仕様
・HTML の定義

生成される DOM Tree とは？
・解析ツリー
・「DOM 要素と属性のノード」のツリー
・ツリーのルートは「Document」オブジェクト

---

3.CSS Parser → Style Rules

---

4.Render Tree = DOM Tree + Style Rules

色や寸法などの視覚的な属性を持つ矩形を含む
・矩形は、画面に表示される正しい順序で並んでいる

---

5.Render Tree → 各ノード描画

5-1.「レイアウト」処理
・画面に表示される正確な座標が各ノードに割り当てられる

5-2.「描画」処理
・レンダー ツリーが走査され、UI バックエンド レイヤを使用して各ノードが描画される






August 5th, 2011
How Browsers Work: Behind the scenes of modern web browsers
・和訳A.ブラウザのしくみ: 最新ウェブブラウザの内部構造
・和訳B.How Browsers Work - Behind the Scenes of Modern Web Browsers — Translation of "How Browsers Work" 0.1 documentation
・和訳C.ブラウザってどうやって動いてるの？（モダンWEBブラウザシーンの裏側）