初級では4人の登場人物で流れを追いました。ここでは同じ旅を、実際のプロトコル名と手順で追い直します。読み終わる頃には、開発者ツールのNetworkタブが読めるようになっているはずです。
新しい名前がたくさん出てきますが、暗記は不要です。初登場の用語には「※1・※2…」と番号を付けて、各セクション末尾の「登場人物メモ」の同じ番号で説明します。読み流して、あとからメモで拾ってください。
旅の全体は初級と同じ4段階。それぞれに正式な名前がついています:
ここで追うのは、あくまで端末とサーバをつなぐ通信経路です。サービス全体の構成（フロント・API・DB…）でどう処理されるかは 1リクエストの流れ を参照してください。
通し図解はアニメーション『パケットの旅』です。以降の①〜④では「旅のどのコマの話か」を毎回示します:
🎬 アニメーション『パケットの旅』の ②〜⑤ のところです！
名前解決は「近くの控えから確認し、なければ遠くへ聞きに行く」仕組みです。必ずこの順で進みます:
登場人物メモ（※の説明）:
⚠️ イレギュラー（うまくいかないとき）:
中級では「近くの控えから、なければ遠くへ」を見ました。上級では、その問い合わせの型とキャッシュ階層を精密にします。
登場人物メモ：
より詳しい階層と権威の仕組みは DNS を参照。
🎬 アニメーション『パケットの旅』の ②〜⑤ のところです！
まず、ブラウザは「example.com」がどこにあるのか知りません。名前は知っていても住所を知らない状態です。
そこで最初にやるのが、住所案内所——DNSへの問い合わせです。「example.com というお店の住所を教えてください」。案内所は台帳をめくり、「その店の住所は 93.184.216.34 です」と数字の住所（IPアドレス）を教えてくれます。
大事なのは順番です。住所がわからないと、郵便局から手紙を送ろうにも送れない。だからこの旅は必ず「住所調べ」から始まります。たとえでつかみ直したいときは、概要のアニメーション『身近な例で解説』へ。
🎬 アニメーション『パケットの旅』の ⑥〜⑧（緑の枠 = 3ウェイハンドシェイク）のところです！
IPアドレスがわかったら、そのIPのポート※1 443（HTTPSの場合）に向けて、2段階の準備をします。順序は必ず TCPが先、TLSが後です。
第1段階 — TCPの3ウェイハンドシェイク※2（初級の「3回の挨拶」の正式名）:
この3ステップ（メッセージ3本＝往復にして約1.5回）で「相手は実在し、双方向に届き、番号の起点を共有した」状態になり、欠落の検知・再送・順序の保証——つまり信頼できる通信が可能になります。
第2段階 — TLSハンドシェイク※4（HTTPSの場合のみ）:
登場人物メモ（※の説明）:
⚠️ イレギュラー（うまくいかないとき）:
接続確立は往復（RTT）※1のコストそのものです。ここを削るのが高速化の主戦場になります。
TCPの3ウェイハンドシェイク — SYN → SYN-ACK → ACK。ここで1RTTを消費し、双方向到達とシーケンス番号の起点合わせを済ませます。
TLSハンドシェイク（HTTPSのみ）— 証明書の提示・検証と、鍵合意（現在は主にECDHE。盗聴前提でも2者だけの鍵を作る）を行います。
つまりHTTPSの初回は、DNS＋TCP（1RTT）＋TLS（1RTT）という往復の積み重ねの上で、ようやく本題に入れます。この往復を1つでも減らす工夫が、次のHTTP進化の動機です。
登場人物メモ：
TCP・TLSが通信のどの層に乗るのかは ネットワーク層 を参照。
🎬 アニメーション『パケットの旅』の ⑥〜⑧（緑の枠のところ）です！
住所がわかったら、いきなり用件を叫ぶのではなく、まず電話をつなぎます。挨拶は必ず3回、この順番です:
この3回で、お互いに「ちゃんと聞こえる相手だ」と確認し合ってから会話が始まります。この確認のおかげで、途中で言葉が抜け落ちても気づいてやり直せる、信頼できる通話になります。
🎬 アニメーション『パケットの旅』の ⑨〜⑪ のところです！
確立した通信路の上で、ようやく本題の注文です:
GET /index.html HTTP/1.1 という1行目に、Host や User-Agent などのヘッダ※2が続く<link>（CSS）・<img>（画像）・<script>（JS）を見つけるたびに追加リクエストを発行する登場人物メモ（※の説明）:
ブラウザが実際に送っている依頼書は、たったこれだけのテキストです:
GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/126.0
Accept: text/html
Accept-Language: ja
Cookie: session=abc123
構造は上から3つだけ。必ずこの順です:
GET /index.html HTTP/1.1。「/index.html を取得（GET）したい。作法は HTTP/1.1 で」という宣言名前: 値 の形の欄外メモの束。上の例では Host（宛先のドメイン）、User-Agent（差出人=ブラウザの種類）、Accept（受け取れる形式）、Accept-Language（希望の言語）、Cookie（会員証）の5枚が全部ヘッダ返事（HTTPレスポンス）も同じ3部構造で、1行目だけが HTTP/1.1 200 OK のようなステータスラインに変わり、ボディにHTML本体が入っています。
3桁の数字は百の位がジャンルです。2xx=成功 / 3xx=案内 / 4xx=依頼側の問題 / 5xx=お店側の問題、とだけ覚えれば初見の数字も読めます。
2xx — 成功
3xx — 案内（リダイレクト）
4xx — 依頼側（あなた側）の問題
5xx — お店側の問題
⚠️ イレギュラー（うまくいかないとき）:
確立した通信路の上で注文します。上級の主役は、そもそも往復を起こさない／軽く済ませるキャッシュ判定です。
Cache-Control: max-age（※1）の期限内なら、通信せずにキャッシュを即使用する（最速）If-None-Matchに、更新日時をIf-Modified-Sinceに載せて問い合わせるこのキャッシュ判定は二段構えです。手元のブラウザキャッシュ（そのユーザー専用＝private）と、経路上のCDNなど共有キャッシュ（public、みんなで再利用）。近い共有キャッシュから配れば、大元のサーバまで往復せずに済みます。
登場人物メモ：
共有キャッシュの地理分散と配信の仕組みは CDN を参照。
🎬 アニメーション『パケットの旅』の ⑨〜⑪ のところです！
電話がつながったら、ようやく注文です。「このページをください」。
お店（Webサーバ）は注文を受けて、ページの設計図（HTML）を送り返してきます。ここで面白いのは、最初に届くのは完成品ではなく設計図だということ。設計図を読んだブラウザは「この写真も要る」「この飾り付け（CSS）も要る」「この動く仕掛け（JavaScript）も要る」と気づいて、追加の注文を何度も繰り返します。
🎬 アニメーション『パケットの旅』の ⑫（最後のコマ）のところです！
材料が届いたら、ブラウザの中で組み立てが始まります。ここも流れ作業です:
登場人物メモ（※の説明）:
⚠️ イレギュラー（割り込みと事故）:
<script> は既定ではHTMLの解析を一時停止させる。JSが重いと白い画面が続くのはこのため。defer 属性や読み込み位置が表示速度に直結するつまり「描画とJS実行は絡み合いながら進む」——ここを制御するのがフロントエンド性能改善の世界で、その入口がこのセクションです。開発者ツールのNetworkタブを開いてページを再読み込みすると、今日の旅の1往復1往復が、そのまま1行ずつ並んでいるのが見えます。
材料が届いたら、ブラウザ内で DOM＋CSSOM→レンダーツリー→レイアウト→ペイント→合成 と進みます。ここで効くのが資源の優先度です。
<script>はHTMLパースを止める。defer／asyncや配置で緩和する🎬 アニメーション『パケットの旅』の ⑫（最後のコマ）のところです！
材料が揃ったら、ブラウザが目の前で組み立てます。組み立てにも順番があります:
こうして、ようやくページが表示されます。
ここまでの所要時間、だいたい1秒未満。あなたがまばたきする間に、住所案内・3回の挨拶・注文・配達・組み立てが全部終わっています。次にページがなかなか開かないとき、思い出してください。どこかの配達が渋滞しているだけで、仕組みはいつもこの順番で動いています。
そのまま解けます（成績は保存されません）。無料アカウントを作ると、学習の記録と進捗の山登りが始まります。
問1. TCPの3ウェイハンドシェイクの目的として最も適切なものはどれ？
問2. DNSの名前解決で「そんな名前はない」（NXDOMAIN）が返ったとき、その後どうなる？
問3. HTTPS通信でTLSハンドシェイクが行われるタイミングはどれ？
問4. 1ページの表示でブラウザとサーバの往復が何十回も発生する主な理由はどれ？
問5. 「404 Not Found」が返ったとき、旅のどこまでは成功している？
問6. HTMLの解析中に現れた、属性のない通常の<script>が既定でページ表示に与える影響はどれ？
問7. ログイン済みのユーザーが、権限のないページを開こうとしたときに返るステータスとして最も近いのは？
問8. DNSの答えの控え（キャッシュ）を、どれだけの間そのまま使ってよいかを決める「賞味期限」を英字3文字の略語で答えてください。