😊

【超ざっくり】ブラウザレンダリングの流れ

に公開
frontend
ブラウザ
tech

フロントエンドの処理の流れが全然わかってないので、簡単に調べてみた。

参考

ざっくりした流れ

レンダリングは以下の4ステップで実行される

Loading  →  Scripting  →  Rendering  →  Painting

※状況に応じて処理が前後したりすることもある
※javascriptによるDOM操作とか

Loading

アウトプット：DOMツリー、CSSOMツリー

HTMLを取得し、解析する。
HTML内に含まれるリソースも順次取得する。
※画像、jsファイル、cssファイルとか

</html>に到達し、HTMLパースが完了すると最初のDOMツリーが生成される。

Scripting

アウトプット：特になし

HTML内のjavascriptを実行する
fetchでapi実行したり、DOM操作したりすることも
同期的な通信などが発生する場合、DOMツリーの生成を中断させることもあるので注意が必要

Rendering

アウトプット：レイアウトツリー

CSSOMツリーを元に、各DOM要素になんのCSSが割り当てられるのかを算出する。
続いて、要素の大きさや位置などの情報をもとにレイアウトツリーを生成。

Painting

アウトプット：Display List、レイヤー、画面描画

レイアウトツリーを元に、画面描画を行う。
まず、Display Listと呼ばれるどこに何を描画するのかという命令群を生成する。
その命令を元に、レイヤー単位で描画していく。
最後に、生成されたレイヤーをz-indexを元に重ねて合成して画面描画する

フロー図

まとめるとこんな感じ

┌────────────┐
│ HTML取得    │ ← URLにアクセスしHTMLダウンロード開始
└────┬───────┘
     ↓
┌────────────┐
│ HTMLパース  │ ← DOMツリー構築開始
│            │
│ ┌────────────┐
│ │ <link rel="stylesheet"> │ → CSS取得・パース並行開始
│ └────────────┘
│
│ ┌────────┐
│ │ <script> │ → JavaScript実行
│ └────────┘
└────┬───────┘
     ↓
┌────────────┐
│ DOMツリー構築完了 │
└────┬───────┘
     ↓
┌────────────┐
│ CSSOMツリー生成   │ ← CSSの取得・パース完了後に生成
└────┬───────┘
     ↓
┌────────────┐
│ レイアウトツリー生成 │ ← DOM + CSSOMをもとに各要素の位置・サイズを計算
└────┬───────┘
     ↓
┌──────────────────────┐
│ Paint（Display List生成）│ ← 背景・ボーダー・テキストなどの描画指示
└────┬─────────────────┘
     ↓
┌────────────┐
│ ラスタライズ         │ ← Display Listをピクセルへ変換
└────┬───────┘
     ↓
┌────────────┐
│ レイヤー合成         │ ← z-indexや重なり順に従って合成し画面表示
└────────────┘

Discussion