普段なにげなく使っているブラウザですが、 裏側ではいろんなことをよしなに処理してくれています。
本記事では 「レスポンスを取得してからブラウザで表示されるまでの流れ」 をざっくり見ていきたいと思います。
この記事は入門編ですが、より詳しくは以下の書籍と記事がおすすめです。特に書籍の学びをまとめたような記事になっているくらい参考にさせていただきました。より詳細の仕組み、さらにはパフォーマンスチューニングの話が書かれていて勉強になりました。
意訳してしまい正確ではない部分や、間違っている部分があるかも知れません。そっと指摘してもらえたら嬉しいです。
ブラウザで表示されるまでの 4 STEP
基本的には、以下の 4 STEP を経て画面に描画されます。
1. Loading
2. Scripting
3. Rendering
4. Painting
おおよその役割は以下のようです
| STEP | 役割 |
|---|---|
| Loading | HTML,CSS,JavaScript,画像とかの読み込み・解析 |
| Scripting | JavaScript のコンパイルと実行 |
| Rendering | CSSの適用とレイアウト |
| Painting | 画面に表示 |
各 STEP で行われていること
さらにそれぞれの STEP を見ていきます
1. Loading
HTML,CSS,JS,画像などのリソースの取得・読み込み・解析を行います。
1-1. DownLoad
1-2. Parse
1-1. DownLoad
HTML, CSS, JavaScript, 画像などリソースを取得します。
使用するネットワークプロトコルは以下のとおりです。
| ネットワーク階層 | プロトコル |
|---|---|
| アプリケーション層 | HTTP |
| セッション層 | TLS（httpsのみ） |
| トランスポート層 | TCP |
| ネットワーク層 | IP |
名前解決は省いてます
1-2. Parse
ダウンロードしたリソースを読み込み・解析しながら、レンダリングエンジンが扱う内部表現に変換していきます。
- HTML は
DOM ツリーという木構造を持つ内部表現に変換 - CSS は
CSSOM ツリーという木構造を持つ内部表現に変換
DOM（Document Object Model） は「HTML、XML を JavaScript から操作するためのAPIの集合」
CSSOM（CSS Object Model） は「CSS を JavaScript から操作するためのAPIの集合」
を指しています
その他のリソースもそれぞれレンダリングエンジンにが扱う内部表現に変換されます
また １-２ の Parse がすべて完了してから Scripting にうつるとは限りません
script 要素は何も属性を指定しない場合は、同期的に読み込みと実行が行われ、その間の Parse をブロックします
複数の JavaScript ファイルが読み込まれていたら Parse の一部と Scripting の一部が繰り返されます。
script 要素に async, defer 属性を指定した場合は非同期的な挙動に変化します。
- async : script 要素の読み込み時に Parse をブロックせず、スクリプトが取得され次第 Scripting 実行
- defer : script 要素の読み込み時に Parse をブロックせず、ドキュメントのパース後に Scripting 実行
となります
2. Scripting
JavaScript のコンパイルと実行をします。
コンパイルの方式は、JavaScript エンジンの実装方式によって異なりますが JIT コンパイルが主流のようです。
JIT（Just In Time） というように、 JavaScript の実行時にブラウザの処理系が動作している CPU が直接解釈できる機械語に変換します。
一度 Painting まで終わったああとに、なんらかのイベントによって JavaScript が実行された場合はこの Scripting から再実行します。
再利用できるものは極力つかうようにレンダリングエンジンなどがよしなにやってくれます。
3. Rendering
スタイルの計算と、どのように視覚的に配置するかきめるという処理を行います。
3-1. Calculate Style
3-2. Layout
3-1. Calculate Style
CSSOM ツリーのなかに格納された CSS ルールセットを用いて、DOM ツリーの要素のどことマッチするか総当りで計算していきます。
マッチングの処理が終わったら、同じ DOM 要素に対して複数あった場合に CSS の詳細度にあわせて優先順位をつけていきます
複数のルールセットが同じ詳細度であれば、 CSS の中で最後に宣言されたものが要素に適用されます。
3-2. Layout
要素の大きさ、位置、z軸のかさなりなどを計算します。
最終的に DOM ツリーと CSSOM ツリーを合体させて Layout ツリーを生成します。
4. Painting
画面に表示すべくピクセル単位で表示するための処理を行います。
4-1. Paint
4-2. Rasterize
4-3. Composite Layers
4-1. Paint
ここでは後続の処理のための命令を生成します。
2D グラフィックライブラリ（Chrome などで使用されている Blink レンダリングエンジンでは Skiaを使用）に伝える命令です。
4-2. Rasterize
４-１ で生成した命令をもとに ピクセルへと描画します。
ｚ軸の関係を考慮して、それぞれの層を、１レイヤーとして別々に描画していきます。
z-index などではまるスタックコンテキストの条件が関係するのもこのラスタライズです。
4-3. Composite Layers
作ったレイヤーを合成していきます。