フロントエンドエンジニアをやっています。
26歳です。頑張るから読んでほしい。

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

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

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

予想

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

  • アドレスバーに打ち込んだURLがサーバーに送られる
  • サーバーがURLを受け取る
  • サーバーがデータベース?データサーバー?にURLの情報を探しにいく
  • 見つかったらサーバーがクライアント側にその情報を返す(その情報ってなんだろ?html、css、jsとか?)
  • クライアント側、ブラウザが受け取り、htmlやcssなどをレンダリングする
  • 表示

勉強後

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

Webフロントエンド ハイパフォーマンス チューニング

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

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

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

感想

最初は、

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

の問いに対してあまり書けなかったのですが、ブラウザのレンダリングの仕組みの勉強後、3倍くらいの量で書くことができました! ブラウザに関する知識が身についた感触があります。

ブラウザに対して興味を持ったので、今後はネットワークやコンパイル、レイアウト、ラスタライズ等の自分の興味を持った分野に対して深掘りしていき、この問いに対しては定期的に考えてみたいなあと思っています。 (来年も同じ問いに対して考えて、書ける量を増やしていけたらなあ...)