hamakyo.log
open main menu

Webページがブラウザに表示されるまでの仕組み

/ 5 min read
last update date:

Webページがブラウザに表示されるまでの仕組み

ブラウザにURLを入力してからページが表示されるまで、裏側では複雑な処理が瞬時に実行されている。この一連の流れを理解することで、Webアプリケーションの性能改善やトラブルシューティングに役立つ知識が身につく。

全体の流れ

  1. URLの解析
  2. キャッシュの確認
  3. DNS解決
  4. サーバーへの接続
  5. HTTPリクエストの送信
  6. サーバー側の処理
  7. HTTPレスポンスの受信
  8. レンダリング

1. URLの解析

ブラウザはまず、入力されたURLを構成要素に分解する。

https://example.com/api/users
  • プロトコル: https（通信方式）
  • ドメイン: example.com（サーバーの識別名）
  • パス: /api/users（サーバー内のリソース位置）

2. キャッシュの確認

ブラウザは過去に取得した情報をキャッシュに保存している。同じドメインへのアクセス履歴があれば、DNS解決をスキップできる。

キャッシュの種類

  • ブラウザキャッシュ
  • OSキャッシュ
  • ルーターキャッシュ

3. DNS解決

ドメイン名をIPアドレスに変換する処理だ。コンピューターは数字でしか通信できないため、この変換が必要になる。

DNS解決の流れ

  1. ローカルキャッシュを確認
  2. ISPのDNSサーバーに問い合わせ
  3. ルートDNSサーバーから順次問い合わせ
  4. 権威DNSサーバーから最終的なIPアドレスを取得

例：example.com → 93.184.216.34

4. サーバーへの接続

TCP接続の確立

IPアドレスが判明したら、3ウェイハンドシェイクでTCP接続を確立する。

  1. SYN（接続要求）
  2. SYN-ACK（接続受諾）
  3. ACK（確認）

ポート番号の指定

  • HTTP: 80番ポート
  • HTTPS: 443番ポート

サーバー内の特定のサービスにアクセスするための「部屋番号」のような役割を果たす。

5. HTTPリクエストの送信

リクエストの構成

GET /api/users HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml
Connection: keep-alive
  • リクエストライン: メソッド、パス、HTTPバージョン
  • ヘッダー: 追加情報（ブラウザ情報、受け入れ可能なコンテンツタイプなど）
  • メッセージボディ: POSTリクエストの場合のデータ

6. サーバー側の処理

ロードバランサー

大規模なサービスでは、複数のサーバーにリクエストを分散する。

アプリケーションサーバー

  • ルーティング処理
  • ビジネスロジック実行
  • データベースアクセス
  • HTMLの生成

7. HTTPレスポンスの受信

レスポンスの構成

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 12345
Cache-Control: max-age=3600

<!DOCTYPE html>
<html>
<head>
    <title>Example Site</title>
</head>
  • ステータスライン: HTTPバージョン、ステータスコード、理由句
  • ヘッダー: コンテンツタイプ、サイズ、キャッシュ情報など
  • メッセージボディ: HTML、CSS、JavaScript

8. レンダリング

ブラウザでの処理段階

ローディング HTMLファイルのダウンロードと解析。CSSやJavaScriptファイルの並行ダウンロードも開始される。

スクリプティング JavaScriptの実行。DOM操作やイベントリスナーの登録が行われる。

レンダリング

  • DOMツリーの構築
  • CSSOMツリーの構築
  • レンダーツリーの作成
  • レイアウト計算

ペインティング 実際の画面への描画処理。

パフォーマンスに影響する要素

DNS解決時間

  • CDNの活用
  • DNS prefetchの設定

サーバーレスポンス時間

  • データベースクエリの最適化
  • キャッシュの活用
  • サーバーサイドレンダリングの検討

レンダリング性能

  • CSSの最適化
  • JavaScriptの非同期読み込み
  • 画像の最適化

開発時の活用

この流れを理解していると、以下の場面で役立つ：

  • 性能問題の特定: どの段階がボトルネックかを判断
  • SEO対策: クローラーの動作を考慮した実装
  • セキュリティ対策: 各段階での脆弱性を理解
  • キャッシュ戦略: 適切なキャッシュ設定の選択

実際のデバッグでの応用

ブラウザの開発者ツールを使って、各段階の処理時間を確認できる。

  • Network タブ: DNS解決、接続、レスポンス時間
  • Performance タブ: レンダリング処理の詳細
  • Console タブ: JavaScript実行時のエラー

これらの情報を元に、どの段階に問題があるかを特定し、適切な改善策を講じることができる。