はじめに
URL入力〜画面描画までのブラウザの仕組みについてまとめた。
誰が何をやるのかについて、少し曖昧なところがある。
全体像
今回記述するブラウザの仕組みは、以下の図の粒度で説明する。
ブラウザの仕組み
1. URLを入力〜HTTPレスポンス受信
まず、ユーザがブラウザのアドレスバーに閲覧したいWebページのURLを入力する。ユーザインタフェース機能が、認識したURLを構文解析する。
ブラウザエンジンが構文解析したURLからHTTPリクエストを生成し、WebサーバにHTTPリクエストを送信する。
WebサーバからHTTPレスポンスを受け取る。
ブラウザエンジンがレスポンスを分解し、HTMLをHTMLレンダリングエンジンに渡し処理を依頼する。
2. HTMLの解析〜DOMの構築
HTMLレンダリングエンジンがHTMLを字句解析する
トークン単位でHTMLを分解する。
トークンの種類としては、以下の６つがある。
- DOCTYPE
- 開始タグ
- 終了タグ
- コメント
- 文字列
- EOF
トークンは、トークンインタフェースを実装している。
トークンインタフェースには、メンバーとして、次のトークンへのポインタを持っている。そうすることで、htmlの順序をがわかる仕組みである。
以下の文字列を想定し、トークンの分割例を示す。
例:
<body><h1>HelloWorld</h1></body>
HTMLレンダリングエンジンがHTMLを構文解析する
基本的に1つのタグが1つのノードになる。言い換えるとトークンをタグの単位でまとめる。
ノードの種類に応じて、Nodeインタフェース、Elementインタフェース、HTMLElementインタフェース、HTMLBodyインタフェースを各ノードに実装する。
例：
3. CSSの解析〜CSSOMの構築
HTMLの構文解析時に、styleタグがあった場合、この処理を行う。
HTMLレンダリングエンジンがCSSの字句解析と構文解析をする。CSSの字句解析、構文解析は、2. でHTMLに対しての手順と同じような処理である。
言語が異なっているが、やることは一緒である。
4. JavaScriptの解析〜実行
HTMLの構文解析時に、scriptタグがあった場合、この処理を行う。
ここにsrc属性が付加されている場合、srcのリンクを以下のいずれかからバイトストリームをロードする。
- ネットワーク
- キャッシュ
- Service Worker
バイトストリームデコーダがバイトストリームをデコードし、バイトにする。バイトを字句解析してトークンごとに区切る。
JavaScriptエンジンのプリパーサーが構文エラーがないかチェックするし、パーサが構文解析し、ノードツリーを生成する。
これをプログラムとして実行しDOMやCSSOMを操作する。DOMやCSSOMが変化することで必要に応じて画面の描画が更新されることになる。
5. レンダリングツリーの生成〜画面描画
DOMとCSSOMからレンダリングツリーを生成する。レンダリングツリーからレイアウトツリーを生成する。
レイアウトツリーをラスタライズし、画面に描画する。
参考文献
- 雑誌 WEB+DB vol.120 Webページが表示されるまで
- ブラウザのしくみ
おわりに
ブラウザの仕組みについてまとめた。