普段なにげなく使っているブラウザですが、裏側ではいろんなことをよしなに処理してくれています。

本記事では 「レスポンスを取得してからブラウザで表示されるまでの流れ」 をざっくり見ていきたいと思います。

この記事は入門編ですが、より詳しくは以下の書籍と記事がおすすめです。特に書籍の学びをまとめたような記事になっているくらい参考にさせていただきました。より詳細の仕組み、さらにはパフォーマンスチューニングの話が書かれていて勉強になりました。

意訳してしまい正確ではない部分や、間違っている部分があるかも知れません。そっと指摘してもらえたら嬉しいです。

ブラウザで表示されるまでの 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

作ったレイヤーを合成していきます。