ブラウザのアドレスバーにURLを入力してから、Webページが表示されるまでの流れ。
キャッシュなしの場合でざっくり纏めてみた。
Webページが表示されるまでの流れ（ざっくり）
- WebブラウザのアドレスバーにURLを入力
- クライアントはアドレスバーに入力されたURLから「ドメイン」部分を抜き出しDNSサーバーに送り、IPアドレスを要求する
- DNSサーバーは、受け取ったドメインからWebサーバーのIPアドレスを特定する（名前解決）
- DNSサーバーからクライアントにIPアドレスが返信される
- クライアントは取得したIPアドレスのWebサーバーに、URLのパスの部分（/path/path/）のWebページデータをHTTPで要求する
- WebサーバーはクライアントにWebページのHTMLデータを最初に送信する
- Webブラウザは、HTMLを解析し、JS、CSS、画像などのそのページで参照されている全てのリソースに対してデータを複数回に分けてリクエストする
- WebブラウザはHTML / CSS / JSを読み込むと構文を解釈しレンダリング処理を行う
用語集
DNS
ドメインネームシステム（Domain Name System）の略で、ドメイン名（人が使う言葉で書かれた住所）とIPアドレスをリンクさせる仕組み。
「名前解決」ともいう。
DNSサーバー
ドメイン名とIPアドレスを対応づけるデータベースを管理しているサーバー
HTTPメッセージ
クライアントとサーバーがデータを交換する手段。
クライアントがサーバーに送信してアクションを起こさせる「HTTP リクエスト」とサーバーの回答である「HTTPレスポンス」の2種類がある。
HTTPプロトコル
HTTPは、HTML文書などのリソースを取り出すことを可能にするプロトコル。
レンダリング処理（ブラウザ側）
ブラウザはHTML、JS、CSSを読み込むと構文を解釈し「レンダリング処理」を行う。
レンダリング処理の順番は以下。
- HTML マークアップを処理して DOM ツリーを構築する。
- CSS マークアップを処理して CSSOM ツリーを構築する。
- DOM と CSSOM を組み合わせてレンダリング ツリーを構成する。
- レンダリングツリーでレイアウトを実行して各ノードの形状を計算する。
- 各ノードをブラウザにペイントする。
- DOM (Document Object Model) -> HTML マークアップ
- CSSOM (CSS Object Model) -> CSS マークアップ
- レンダリングツリー -> DOM ツリーと CSSOM ツリーを組み合わせたのがレンダリングツリーの正体