アドレスバーにURLを打ち込んでページが表示されるまで

ブラウザを立ち上げてアドレスバーにURLを打ち込んでEnter押してからページが表示されるまでに (裏側で) 何が起こっているかわかる限り説明してみてください。

という問題に15分何も見ずに考えてみるというのを以前(2月くらい？)やってみたので、そのMEMOです。

予想

何もブラウザに関して勉強せず、15分考えてみた予想(結果)は以下です。 (すごくざっくりしてるので恥ずかしい...)

あまりにも書けなかったことがショックだったので、

を読んでブラウザのレンダリングの仕組みについて学んでみました。

勉強後、同じように15分何も見ずに考えてみた結果が以下です。

アドレスバーにURLを打ち込む
ホスト名をIPアドレスに変換した上でネットワークプロトコルを介して必要なリソースを取得
- リソース→HTML、css、js、画像など
まずはHTMLから読み込み、DOMツリーの構築をする
DOMツリーの構築　(DOMツリーとはレンダリングエンジンが解釈できるようしたもの)
- htmlファイルをもとに字句解析をしトークン列に
- トークン列をもとに構文木に
DOMツリーの構築中にcssやjs、画像の参照があれば読み込む
cssをもとにCSSOMツリーの構築
jsファイルをもとに字句解析
トークン化
抽象構文木に
コンパイル
- javascriptエンジンが解釈できるように変換
- よく使われているのがJIT
javascriptの実行
- CPU上で実行
DOMツリーをもとにレイアウトツリー構築構築をする
スタイルの計算
- どのDOMにどのcssプロパティが当たるか計算
- cssの詳細度の計算
レイアウト
レイアウト情報の計算をしレイアウトの作成（設計図みたいなもの）
- レイアウト情報→margin,paddingなどの位置
ペインティング
- 2dグラフィックエンジン向けにRender Treeをもとに命令を作成
ラスタライズ
- レイヤーごとに描画
- レイヤーはposition ,opacity,z-indexごとに
レイヤーの合成
- できたレイヤーを合成
ブラウザに表示される