ブラウザの仕組み２

先日に引き続きブラウザの仕組みをまとめました。

CSS関連処理

CSSもHTML、JSと同様にツリーを作成します。
HTMLがDOM（Document Object Model）ならば、CSSはCSSOM（CSS Object Model）です。

CSS関連処理も大体同じ流れでトークン化→ツリー化→レイアウト計算→レンダリング→JSによる再レンダリングです。
レイアウト計算をリフローといい、文章が流れるように再配置するというところから来ているそうで、
レンダーツリーの各要素について、位置（x, y座標）やサイズ（幅、高さ）、余白、パディング、ボーダーなどを計算し、最終的なレイアウトが決定されます。

再レンダリングですが、現在のブラウザでは必要な部分のみ再計算し直す仕組みになっています。

まとめ

ブラウザにページを表示するまでを例に例えてまとめると次のようになると思います。
ここでは家を建てる作業に例えます。

1. 土地の準備（HTML文書の読み込み）

家を建てるためにまずは土地を準備します。土地は、家の基盤（HTML文書）を表しています。HTMLが読み込まれると、その内容が最初に解析され、家を建てるための設計図（DOMツリー）を作成する準備が始まります。

2. 設計図を描く（DOMツリーの構築）

土地を取得したら、次に家の設計図（DOMツリー）を描きます。この設計図は、家がどのように組み立てられるべきかを示しています。DOMツリーは、HTML文書を基にして、各要素がどのように構成されるか、どの要素が親でどの要素が子なのか、という情報をツリー形式で整理します。

3. 基礎工事（レンダリングエンジンによる描画）

設計図が完成すると、家の基礎工事（レンダリングエンジン）が始まります。基礎工事では、設計図に従って、土台が築かれ、最終的に家の骨組みが作られます。ブラウザでは、この段階でCSSを使って見た目を決定し、ページをどのように表示するかを計算します。

4. 家の外観の仕上げ（CSSによるスタイリング）

基礎ができたら、今度は家の外観の仕上げです。壁や屋根、ドア、窓などが作られ、家の外見が整います。この過程では、CSSが使われて、ページの色やフォント、配置が決まります。

5. 家の中に家具を配置（JavaScriptによる動的変更）

最後に、家具を配置して部屋を飾り付けます。これはJavaScriptによってページ内のコンテンツを動的に変更する作業に相当します。例えば、ユーザーの操作に応じてページの一部を更新したり、アニメーションを追加したりすることができます。

6. 完成した家の内覧（ブラウザでのページ表示）

家が完成したら、いよいよ内覧会が行われます。これがブラウザ上でのページ表示です。ユーザーはページを開くと、設計図に基づいて作られたコンテンツがブラウザに表示され、最終的にページとして見えるようになります。