Webブラウザエンジニアリング ―Chrome開発者たちから学ぶ、作って理解するブラウザとWebの仕組み

5章ページのレイアウト

　これまで、レイアウトは開始タグと終了タグを独立して処理する線形的なプロセスでした。しかし、Webページはツリー構造です。Webページの境界線や背景が視覚的に互いに入れ子になっているという見た目からも、そのことが見て取れます。これをサポートするために、この章ではツリーベースのレイアウトに切り替えます。この方式では、要素のツリーが描画前にレイアウトオブジェクトのツリーに変換されます。その過程で、背景を使ってWebページをよりカラフルにしていきます。

5.1　レイアウトツリー

　現在、私たちのブラウザは要素の開始タグと終了タグを別々にレイアウトしています。両方のタグは、cursor_xやcursor_yのようなグローバルな状態を変更しますが、それ以外の状態は考慮されておらず、要素全体の幅や高さのような情報は計算されません。これでは、要素の背後に背景を描画することはもちろん、より複雑な視覚効果を描画することも非常に困難です。そのため、Webブラウザはレイアウトを異なる方法で構造化します。

　ブラウザにおいて、レイアウトとは「レイアウトツリー（layout tree）」を生成することであり、そのノードは「レイアウトオブジェクト（layout object）」です。各レイアウトオブジェクトはHTML要素に関連付けられ※1、それぞれがサイズと位置を持ちます。ブラウザはHTMLツリーを走査してレイアウトツリーを生成し、次に各レイアウトオブジェクトのサイズと位置を計算し、最後に各レイアウトオブジェクトを画面に描画します。

※1　<script>のような要素はレイアウトオブジェクトを生成しません。一部の要素は複数のレイアウトオブジェクトを生成することもあります。例えば、 ...