メインコンテンツまでスキップ

HTTP/2の基礎

このドキュメントの目的​

HTTP/2 の仕組みを理解し、HTTP/1.1との違いを把握することが目標です。

HTTP/1.1 vs HTTP/2​

HTTP/1.1（従来）​

┌──────────────────┐                    ┌──────────────────┐
│  ブラウザ         │                    │  Webサーバー      │
│                  │                    │                  │
│  1. HTML要求     │──────────────────→│                  │
│                  │←──────────────────│  HTML返却        │
│  2. CSS要求      │──────────────────→│                  │
│                  │←──────────────────│  CSS返却         │
│  3. JS要求       │──────────────────→│                  │
│                  │←──────────────────│  JS返却          │
│  4. 画像要求     │──────────────────→│                  │
│                  │←──────────────────│  画像返却        │
│                  │                    │                  │
└──────────────────┘                    └──────────────────┘

1つずつ順番にリクエスト（直列処理）

問題点:

  • ❌ Head-of-Line Blocking: 1つのリクエストが遅いと全体が遅延
  • ❌ 複数接続必要: 並列化のため6-8本のTCP接続
  • ❌ ヘッダー重複: 毎回同じヘッダーを送信

HTTP/2​

┌──────────────────┐                    ┌──────────────────┐
│  ブラウザ         │                    │  Webサーバー      │
│                  │                    │                  │
│  1. 複数リクエスト│                    │                  │
│   - HTML         │                    │                  │
│   - CSS          │──────────────────→│  並列処理        │
│   - JS           │   1つのTCP接続      │   ↓              │
│   - 画像         │   （多重化）        │  全て並列で処理  │
│                  │                    │   ↓              │
│  2. 複数レスポンス│                    │  優先度順に返却  │
│                  │←──────────────────│  - HTML（優先）   │
│  HTML受信        │   並列で返却        │  - CSS           │
│  CSS受信         │                    │  - JS            │
│  JS受信          │                    │  - 画像          │
│  画像受信        │                    │                  │
│                  │                    │                  │
└──────────────────┘                    └──────────────────┘

1つのTCP接続で並列処理（多重化）

改善点:

  • ✅ 多重化: 1つのTCP接続で複数リクエスト
  • ✅ 並列処理: Head-of-Line Blocking解消
  • ✅ ヘッダー圧縮: HPACK（重複ヘッダーを圧縮）
  • ✅ サーバープッシュ: サーバーが先読みして送信

HTTP/2の主要機能​

1. 多重化（Multiplexing）​

仕組み: ストリーム（Stream）単位で並列処理

┌────────────────────────────────────────┐
│ 1つのTCP接続                            │
│                                        │
│  Stream 1: GET /index.html             │
│  Stream 2: GET /style.css              │
│  Stream 3: GET /script.js              │
│  Stream 4: GET /image.png              │
│                                        │
│  ↓ 並列で処理                          │
│                                        │
│  Stream 1: 200 OK (HTML)               │
│  Stream 3: 200 OK (JS) ← 先に完了      │
│  Stream 2: 200 OK (CSS)                │
│  Stream 4: 200 OK (画像)               │
└────────────────────────────────────────┘

効果: 1つが遅くても他に影響しない

2. ヘッダー圧縮（HPACK）​

HTTP/1.1:

リクエスト1:
GET /page1
Host: example.com
User-Agent: Mozilla/5.0...
Accept: text/html...
Cookie: session=abc123...

リクエスト2:
GET /page2
Host: example.com        ← 重複
User-Agent: Mozilla/5.0... ← 重複
Accept: text/html...     ← 重複
Cookie: session=abc123... ← 重複

毎回同じヘッダーを送信（無駄）

HTTP/2（HPACK）:

リクエスト1:
全ヘッダー送信（初回）

リクエスト2:
差分のみ送信（GET /page2のみ）

重複ヘッダーは辞書から参照

効果: ヘッダーサイズ削減（約70-80%削減）

3. サーバープッシュ（Server Push）​

仕組み: サーバーがクライアントのリクエスト前にリソースを送信

クライアント → GET /index.html
  ↓
サーバー:
  1. index.htmlを解析
  2. style.cssとscript.jsが必要と判断
  3. クライアントのリクエスト前にプッシュ
  ↓
クライアント:
  - index.html受信
  - style.css受信（リクエストしていないのに届く）
  - script.js受信（リクエストしていないのに届く）

効果: ラウンドトリップ削減

注意: 主要ブラウザが2022年にサポートを廃止（効果が限定的だったため）

4. ストリーム優先度​

仕組み: 重要なリソースを優先的に送信

優先度設定:
- HTML: 最優先
- CSS: 高
- JS: 中
- 画像: 低

サーバーが優先度順に送信

効果: ページ表示の高速化

HTTP/2 vs HTTP/1.1 比較​

項目HTTP/1.1HTTP/2
接続複数TCP接続（6-8本）1つのTCP接続
並列処理接続数による制限無制限（多重化）
Head-of-Line Blockingありなし（アプリケーション層）
ヘッダー毎回全送信圧縮（HPACK）
サーバープッシュなしあり
バイナリテキストバイナリ
TLSオプション事実上必須

HTTP/2のバイナリフレーミング​

HTTP/1.1（テキストベース）​

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0

（人間が読める）

HTTP/2（バイナリ）​

00 00 12 01 05 00 00 00 01 82 86 84 41 8a 08 ...

（バイナリデータ、人間は読めない）

フレーム構造:

┌──────────────────────────────┐
│ Length (24bit)               │ フレームサイズ
├──────────────────────────────┤
│ Type (8bit)                  │ フレームタイプ（HEADERS/DATA等）
├──────────────────────────────┤
│ Flags (8bit)                 │ フラグ
├──────────────────────────────┤
│ Stream ID (31bit)            │ ストリーム識別子
├──────────────────────────────┤
│ Frame Payload                │ データ本体
└──────────────────────────────┘

メリット: パース処理が高速

HTTP/2の制約​

問題: TCP Head-of-Line Blocking​

HTTP/2の多重化:

アプリケーション層: ストリーム並列処理 ✅
  ↓
TCP層: 1つのTCP接続 ← パケットロスで全体が遅延 ❌

TCP の問題:

  • パケットロスが発生すると、TCP全体が待機
  • HTTP/2の多重化が活かせない

解決: HTTP/3（QUIC）← TCPではなくUDP使用

OAuth 2.0/OIDCでのHTTP/2​

使用可能:

  • Authorization Endpoint
  • Token Endpoint
  • UserInfo Endpoint

メリットは限定的:

  • OAuth 2.0フローは基本的にシーケンシャル（認可→トークン→UserInfo）
  • 同時に大量のリクエストを送るケースが少ない
  • HTTP/2の多重化の恩恵は小さい

注意: ほとんどのOAuth 2.0サーバーはHTTP/1.1と両対応

まとめ​

学んだこと​

  • ✅ HTTP/2は1つのTCP接続で多重化
  • ✅ Head-of-Line Blocking解消（アプリケーション層）
  • ✅ ヘッダー圧縮（HPACK、70-80%削減）
  • ✅ サーバープッシュ（主要ブラウザは2022年にサポート廃止）
  • ✅ バイナリフレーミング（高速パース）
  • ✅ TLS事実上必須

HTTP/2の改善点​

項目効果
多重化⚡ 複数リクエスト並列処理
ヘッダー圧縮⚡ 帯域削減
1接続⚡ TCP接続オーバーヘッド削減

制約​

  • ⚠️ TCP Head-of-Line Blockingは残る
  • → HTTP/3（QUIC）で解決

次に読むべきドキュメント​

  1. TLS 1.2 vs TLS 1.3 - TLSバージョンの違い
  2. OAuth 2.0の基礎 - OAuth 2.0を学ぶ

最終更新: 2025-12-18 対象: 中級者向け（オプション） 学習優先度: 低（HTTPの基礎があれば十分、HTTP/2は知っておくと良い程度）