ブラウザレンダリングの流れ
- Loading - リソース読み込み（Download, Parse）
- Scripting - Javascript実行
- Rendering - レイアウトツリー構築（Calculate Style, Layout）
- Painting - レンダリング結果の描画（Paint, Rasterize, Composite Layers）
引用: https://qiita.com/gasheeee/items/267f11314c161392a871
1. Loading - リソース読み込み
このフェーズの主な役割は
- リソースのダウンロード（Download）
- リソースのパース（Parse）
Download
以下のリソースをサーバーからダウンロード
- HTMLファイル
- CSSファイル
- JavaScriptファイル
- 画像ファイル（JPEG、PNG、GIF、SVG）
Parse
HTMLをDOMツリー、CSSをCSSOMツリーに変換（レンダリングエンジンが解析できる形式に変換）
HTML読み込み
以下の工程を経てDOMツリーに変換される
- HTMLを解析してトークンをリスト化
- トークンからツリーデータを作成
- ツリーデータにあるJavaScriptを実行しつつDOMツリーの構築
JavaScriptを実行中はDOMツリーの構築はストップする
2. Scripting - Javascript実行
レンダリングエンジンはJavascriptコードを JavaScript エンジンに引き渡して実行する
- Javascriptコードを解析しトークンを生成
- トークンを解析しASTデータ（抽象構文木）を作成
- ツリーデータを実行可能な状態にする
- 仮想マシンやCPUで実行される
ESlintやPrettier、テストのカバレッジの取得でASTが使われている
参考
3. Rendering - レイアウトツリー構築
Javascriptの実行が終わるとスタイルの計算とレイアウトが行われる
Calculate Style
- 構築したDOM要素にどのCSSが適用されるか計算
- この時にCSSOMツリー全てを参照し、全てのDOM要素に対してCSSセレクタのマッチングを総当たりで行う
- DOM要素にどのCSSが適用されるかが分かれば、CSSの詳細度でどのCSSが適用されるか判別
CSSセレクタのマッチング
- CSSセレクタのマッチングは総当たりで行う（DOMが100個、CSSが50個ある場合には 100 * 50 = 5000回のマッチング処理が走る）
- マッチングは右から左へ行われる
/* 1. DOM要素のclass属性にbuttonが含まれている */
/* 2. その親要素のclass属性にcontainerが含まれている */
/* 3. その親要素のDOM要素名がbodyである */
body .container > .button {
color: red;
}
- 詳細度はセレクターの重み分類で判定される（
1-0-0,0-1-0,0-0-1のような形式）
Layout
DOM要素に当たるCSSプロパティを判別した後、レンダリングエンジンはDOMツリー内のすべてのノードの視覚的なレイアウト情報の計算する。
レイアウト情報とは、
- 要素の大きさ
- 要素のマージン
- 要素のパディング
- 要素の位置
- 要素のz軸の位置
4. Painting - レンダリング結果の描画
Paint
- グラフィックエンジンに向けた命令を生成
Rasterize
- 生成された命令を用いて、レンダリングツリー内の各ノードをレイヤー単位でピクセルに変換していく
レイヤーという単位でピクセルに描画するのは、再レンダリングする場合、すでに描画が終わったレイヤーを再利用することで、素早く再レンダリングするため
ブラウザのウィンドウをスクロールするときには、スクロール分だけコンテンツの表示される位置を移動して描画を更新する必要がある
しかし、このとき更新しなければならないのはコンテンツの表示の位置だけで、コンテンツの描画そのものは変更する必要はないため、以前描画したレイヤーがこのとき再利用される
Composite Layers
- ピクセルにしたレイヤーを合成してレンダリング結果を生成
- 合成処理はCPUで行われるが、3DなどはGPUで処理される（z軸の処理はGPUの方が早いため）
以上の工程を経て、コンテンツが表示される