はじめに
フロントエンド開発を進める中で、ブラウザは欠かすことのできないものです。
マークアップ言語(今回はHTMLに限定)のファイルがブラウザに届いたら、なぜ画面にちゃんと表示されるのか？
そのなぞについて初学者が、過去のさらなる初学者の自分へ伝わるように抽象化したブラウザの仕組みをまとめてみます。まだなぞな部分が多いため、認識のずれもあるかもしれません...
画面に表示するまでの流れ
ブラウザのレンダリングエンジンによってマークアップ言語ファイルを読み取り、画面に表示してくれる大まかな流れは以下の通りです。
これがブラウザの初期表示する際の処理フローとなります。
JavaScriptなどによって表示内容が更新された場合は、変更に必要な工程から処理を行います。そのため再処理が不要な工程は省略されます。
それでは、以下にそれぞれの工程の中で、どのような処理をされているのかを大まかにまとめます。
1. パース
この段階でまずは、レンダリングエンジンのパーサーによってHTMLファイルとCSSファイルの解析をして、以下のような構造体に変換します。
HTMLファイルは、ブラウザエンジンのHTMLパーサーによってDOMツリーという構造体へ。
CSSファイルは、ブラウザエンジンのCSSパーサーによてスタイルルールズという構造体へ。
2. スタイル
パースで作成されたHTMLのDOMツリーと、CSSのスタイルルールズのツリー構造をひもづけていきます。
このふたつの構造体が結びつけて、一つのレンダーツリーを作成します。
この処理によって、HTMLのどの要素にどのようなスタイルが適用されるかを割り出します。
3. レイアウト
レンダーツリーの上位の要素から、要素の位置と大きさを再起的に計算していきます。
ここでは、CSSの以下のようなプロパティがレイアウトの処理に関わります。
height, width, padding, margin, top, right, left, bottom, box-shadowなど
この処理でレイアウトツリーに変換します。
4. ペイント
この処理では、ペイントレコーズとレイヤーツリーを作成します。
-
ペイントレコーズ
レイアウトツリーをもとに画面上への描写指示となるもの -
レイヤーツリー
Webページの要素がどのように画面に描画されるかを管理するために使用されるもの
ここでは、CSSの以下のようなプロパティがレイアウトの処理に関わります。
position, z-index, opacity, transform, filterなど
5. コンポジット
ラスタライズ処理を行います。
ラスタライズ処理は、画像や文字などを表示するための処理です。ペイントレコーズとレイヤーツリーの情報をもとに処理されます。
この処理によってピクセル単位のビットマップに変換され、最終的な画像が得られます。
まとめ
抽象的ですが、ブラウザがHTMLファイル、CSSファイルから解析して画面に表示されるまでの流れをまとめました。このようにブラウザどのように処理を進めていくかを理解することで、CSSの当て方やアニメーションの実装にも役立つなと感じました。
CSSの上書きされてしまう場合やアニメーションの実装も処理を軽量にするプロパティを選定することができるなと感じました。かなり抽象的な内容でしたが、全体像だけでも理解していると今後のコーディングに役立つかと思います。