WEBサイトが表示されるまで

はじめに

こんにちは！ 「ITトレンド」というメディアの開発をしている Taiki です！

「ブラウザに URL を入力したら、どうやってページが表示されるの？」普段何気なく使っている Web ですが、その裏側ではさまざまな仕組みが動いています。
Web の基本動作について、自分なりに整理してまとめました！
この記事を読めば、Web ページがどのように表示されるのかが一通り理解できるようになるはずです！💡

結論

1. DNSルックアップ（ドメイン→IPアドレス変換）
2. TCP接続（サーバーとの通信を確立）
3. HTTPリクエスト送信（ブラウザがページを要求）
4. サーバーがレスポンスを返す（HTMLを提供）
5. ブラウザがHTMLを解析（DOM作成、CSS適用）
6. JavaScriptを実行（データ取得、DOM操作）
7. 追加リソースの読み込み（CSS, 画像, フォント）
8. ページの表示完了！

1. DNS ルックアップ（ドメインからIPアドレスを取得）

https://example.com の「example.com」はドメイン名だが、実際にはIPアドレス（例：192.168.1.1）に変換する必要がある。

ブラウザはDNSサーバーに問い合わせて、対応するIPアドレスを取得する。

流れ

1. ユーザーが example.com にアクセス
2. ブラウザは「このドメインのIPアドレスを教えて」とDNSサーバーに問い合わせ
3. DNSサーバーが「192.168.1.1 だよ」と返す
4. ブラウザはこのIPアドレスにリクエストを送る

2. TCP接続（サーバーとの通信を確立）

IPアドレスが分かったら、ブラウザはそのサーバーと通信を開始する。

TCPという仕組みで、サーバーとの接続を確立する。

流れ

1. ブラウザ「このサーバーと通信したい！（SYN）」
2. サーバー「OK、通信しよう！（SYN-ACK）」
3. ブラウザ「通信開始！（ACK）」
4. サーバーとの接続が確立（3-wayハンドシェイク）

SYN : SYNパケット TCPで接続を確立する際にクライアントからサーバーに送られるパケット
SYN-ACK : SYN-ACKパケット　サーバが接続を受け入れる場合は、クライアントにSYNフラグとACKフラグの両方に１がセットされたSYN-ACKパケットを送る
ACK : クライアントがサーバーにACKパケットを送ることで接続が完了する
3-wayハンドシェイク : TCPにおいて使用されるコネクションの確立のこと。上記「3回のやり取り」によって接続が確立されるため、こう呼ばれている。

https://www.infraexpert.com/study/tcpip9.html

3. HTTP(S)リクエストを送信

接続が確立したら、ブラウザは「ページをくれ！」とサーバーにHTTP(S)リクエストを送る。
例： https://example.com/index.html を開いた場合は、「GET /index.html HTTP/2」というリクエストが送られる

流れ

1. ブラウザ「/index.html をください！（GETリクエスト）」
2. サーバー「OK、これが index.html だよ！」
   ※HTTPS（SSL/TLS）は通信を暗号化するため、まずSSLのハンドシェイクが発生する（証明書の確認など）。その後、暗号化された通信でリクエストをやり取りする。

4. サーバーがレスポンスを返す

サーバーは index.html を取得し、ブラウザに返す。

サーバー側の動作は、レンダリングの方式によって変わる。
https://zenn.dev/innovation/articles/f4440f2329eceb

5. ブラウザがHTMLを解析

ブラウザはレスポンスで受け取った HTMLを解析 して、ページを描画する。

• レンダリングツリーを作る
  • DOMツリーを作成（HTMLを解析してツリー構造にする）
  • CSSOMを作成（CSSを解析して適用ルールを決定）
  • レンダリングツリーを作成（DOM + CSS を統合して描画準備）
  • レイアウト計算（要素の位置・サイズを計算）
  • ペイント（描画）（画面に表示）

流れ

1. HTMLを解析してDOMを作る
2. CSSを適用して見た目を決める
3. JavaScriptを実行
4. 画面に描画

https://tech.iimon.co.jp/entry/2024/04/15/161119

6. JavaScriptの読み込み & 実行

HTMLの解析が進むと、<script> タグを見つけた時点でJavaScriptを読み込んで実行する。
JavaScriptが動くタイミングによってレンダリングが変わる。

JavaScriptの動作タイミング

設定	説明	レンダリングの影響
デフォルト	<script> が見つかった時点で実行	HTML解析が一時停止する（ブロッキング）
defer	HTML解析が終わってから実行	レンダリングをブロックしない
async	スクリプトを並行で読み込み、完了したらすぐ実行	実行順が不定（影響が大きい）

流れ

1. <script> が見つかる
2. JSを取得（app.js など）
3. 実行開始
4. DOM操作やAPIリクエストを実行

7. 追加リソース（CSS, 画像, フォント）の読み込み

HTML内で <link> や <img> があると、それらのリソースを追加で取得する。

例えば、CSSファイルが style.css なら GET /style.css というリクエストが発生。

流れ

1. HTMLの <link rel="stylesheet" href="style.css"> を解析
2. GET /style.css をサーバーに送る
3. CSSファイルがブラウザに届き、適用される

8. ページの表示完了！

すべてのリソースが読み込まれ、レンダリングが完了したら、ようやくページがユーザーに表示される。

• ブラウザの「DOMContentLoaded」イベント
  • HTMLの解析が完了すると発火
• 「load」イベント
  • 画像やCSSなど、すべてのリソースがロードされたら発火