URLを入力してから表示されるまでに何が起きているか
URLをブラウザに打ち込んでEnterキーを押すと、一瞬でWebページが表示されます。しかし、その裏では複数のステップが高速で処理されています。
この記事では「HTMLがブラウザに表示されるまでの仕組み」を順番に解説します。
全体の流れ（5ステップ）
① URLの入力 → DNSでIPアドレスを調べる
↓
② ブラウザ → サーバーにHTTPリクエストを送る
↓
③ サーバー → HTMLファイルをレスポンスで返す
↓
④ ブラウザがHTMLを解析してDOMツリーを構築する
↓
⑤ CSS・画像を読み込んでレンダリングして表示する
STEP1：DNSでIPアドレスを調べる
ブラウザは https://awcs.org のようなドメイン名（URL）を受け取っても、そのまま通信はできません。インターネット上の通信にはIPアドレス（例：203.0.113.1）が必要です。
DNS（Domain Name System） は「ドメイン名からIPアドレスを調べる電話帳」のような仕組みです。
awcs.org → DNS問い合わせ → 203.0.113.1（サーバーのIPアドレス）
たとえ: ドメイン名は人間向けの「会社名」で、IPアドレスは機械向けの「住所」です。DNSは「会社名から住所を教えてくれる案内所」です。
STEP2：HTTPリクエストをサーバーに送る
IPアドレスがわかったら、ブラウザはそのサーバーに向けてHTTPリクエストを送ります。
GET /html-basics HTTP/1.1
Host: awcs.org
Accept: text/html
HTTP（HyperText Transfer Protocol） はWebでデータをやり取りするためのルール（プロトコル）です。現在は暗号化された HTTPS が標準です。
HTTPメソッドの種類
| メソッド | 用途 |
|---|---|
GET |
データを取得する（ページの閲覧） |
POST |
データを送信する（フォームの送信） |
PUT |
データを更新する |
DELETE |
データを削除する |
通常のWebページ閲覧では GET メソッドが使われます。
STEP3：サーバーがHTTPレスポンスを返す
リクエストを受け取ったWebサーバーは、要求されたHTMLファイルを探し、HTTPレスポンスとして返します。
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
<!DOCTYPE html>
<html lang="ja">
...
HTTPステータスコード
レスポンスにはステータスコードが含まれます。
| コード | 意味 |
|---|---|
200 OK |
正常に取得できた |
301 Moved Permanently |
URLが恒久的に変わった（リダイレクト） |
404 Not Found |
ページが見つからない |
500 Internal Server Error |
サーバー内部エラー |
STEP4：HTMLのパース（解析）とDOMツリーの構築
ブラウザはHTMLを受け取ると、パース（解析）を行い、内部的なデータ構造に変換します。
DOMツリーとは
DOM（Document Object Model） とは、HTMLの構造を木（ツリー）状に表現したものです。
document
└── html
├── head
│ ├── meta (charset)
│ └── title
└── body
├── header
│ └── h1 "サイト名"
├── main
│ ├── h2 "記事タイトル"
│ └── p "本文テキスト"
└── footer
ブラウザはDOMツリーを作ることで、JavaScriptによるHTML要素の操作（追加・変更・削除）を可能にします。
CSSOMツリーの構築
HTMLと同様に、CSSもパースされて CSSOM（CSS Object Model） ツリーが作られます。DOMとCSSOMが組み合わさって、最終的な表示スタイルが決まります。
STEP5：レンダリングして画面に表示する
DOM + CSSOM からレンダーツリーが構築され、最終的にブラウザの画面に描画されます。
レンダリングの流れ
- レイアウト（Layout）: 各要素の位置とサイズを計算する
- ペイント（Paint）: ピクセルに色を塗る
- コンポジット（Composite）: レイヤーを合成して最終的な画面を作る
表示速度に影響する要素
レンダーブロッキングリソース
<head> 内のCSSや <body> 内の <script> は、DOMの構築を止めて処理されます（レンダーブロッキング）。
<!-- CSSは<head>内に → 必要だがブロッキング -->
<link rel="stylesheet" href="style.css">
<!-- JSはbody閉じタグ直前に → ブロッキングを防ぐ -->
<script src="app.js"></script>
</body>
async / defer属性
JavaScriptのブロッキングを防ぐ属性です。
| 属性 | 動作 |
|---|---|
| なし | HTMLのパースを止めてJS実行 |
async |
非同期でダウンロード・取得後すぐ実行 |
defer |
非同期でダウンロード・HTML解析完了後に実行 |
<!-- DOMを操作するスクリプトはdefer推奨 -->
<script src="app.js" defer></script>
ブラウザが画像・CSS・JSを追加で取得する
HTMLのパース中、ブラウザは <img> <link> <script> などを見つけると、サーバーに追加リクエストを送ります。
HTMLを取得
→ style.css を取得（CSSリクエスト）
→ app.js を取得（JSリクエスト）
→ photo.jpg を取得（画像リクエスト）
→ hero.jpg を取得（画像リクエスト）
...
ファイル数が多いほどリクエストが増え、表示が遅くなります。これがページ速度最適化でファイルをまとめたり圧縮したりする理由です。
まとめ
URLを入力してからWebページが表示されるまでの流れです。
| ステップ | 処理 |
|---|---|
| 1 | DNS解決: ドメイン名 → IPアドレス |
| 2 | HTTPリクエスト: ブラウザ → サーバーへページ要求 |
| 3 | HTTPレスポンス: サーバー → ブラウザへHTMLを送信 |
| 4 | パース・DOM構築: HTMLを解析してツリー構造に変換 |
| 5 | レンダリング: レイアウト計算 → 描画 → 画面表示 |
この仕組みを理解することで、「なぜCSSを <head> に書くのか」「なぜJSをbody直前に書くのか」といったベストプラクティスの理由がわかります。
HTML・CSSの基本をさらに深めたい方は「HTML入門」ページもご覧ください。
