URLの旅｜URLを打ってから画面が出るまでを、パケットの動きで見る

HOW TO USE使い方

• URL を入れて「旅に出す」を押すと、再生が始まります。例のボタンからも始められます
• 「止める」「次へ」で1場面ずつ進められます。「結果」を押すと最後まで飛ばして、かかった時間だけを見られます
• 青い封筒は PC から出ていくパケット、赤い封筒は PC に戻ってくるパケットです。押すと中身のカードが出ます。届いたパケットは下の「記録」からも開けます
• 「初めて／2回目」「回線」「HTTP/2／HTTP/3」を切り替えて最後まで流すと、「かかった時間」に4つまで並んで比べられます

THE JOURNEY旅の6つの場面

1. キャッシュを探す：ブラウザと OS は、前に調べた名前と IP アドレスの組をしばらく覚えています
2. DNS で名前を調べる：リゾルバが、ルートサーバー → TLD サーバー → 権威 DNS サーバーの順にたどり、名前を IP アドレスに変えます
3. TCP でつなぐ：SYN・SYN-ACK・ACK の3ウェイハンドシェイクで、通り道を作ります
4. TLS で暗号化の準備：ClientHello と ServerHello で鍵の材料を交換し、証明書でサーバーが本物かを確かめます
5. HTTP でページを頼む：GET / を送り、200 OK と HTML を受け取ります
6. 描画：HTML を読み、CSS・JavaScript・画像を取りに行ってから、画面に描きます

途中の家のルーターでは、送り元のアドレスが家の中だけで使うアドレス（192.168.1.10）から、インターネットで使うアドレス（203.0.113.5）に書き換えられます。これが NAT です。帰りのパケットは、ルーターが覚えておいた対応を見て、逆に書き換えてから PC に届けます。

HOW IT WORKS時間の決め方

線ごとに片道の時間を決めておき、パケットの時間は通る線の時間を足して出しています。光回線では、PC から Web サーバーまでの片道を 9.5 ms（往復 19 ms）、サーバーがページを用意するのを 30 ms にしました。

// パケットが着くまでの時間 ＝ 通る線の片道の時間の合計
const dur = path => path.slice(1).reduce((s, n, i) => s + lat(path[i], n), 0);

こうすると、表示までの時間はほとんど「往復の回数 × 往復の時間」で決まることが分かります。光回線で初めて開くときの 227 ms のうち、DNS が 87 ms、TCP と TLS がそれぞれ1往復ずつです。海外のサーバーにすると往復が 153 ms になるので、同じ手順でも 870 ms かかります。

ここから、表示を速くする工夫の多くが「往復を減らす」ことだと分かります。

• 2回目：DNS の答えと CSS・JS・画像がキャッシュに残っているので、その往復がまるごとなくなります。TLS も前回の「切符」で再開でき、証明書を送り直さずに済みます
• HTTP/3：TCP の代わりに UDP の上の QUIC を使い、つなぐ相談と暗号化の相談を1往復にまとめます。TCP の SYN と SYN-ACK の分だけ速くなります
• CDN：サーバーを利用者の近くに置いて、往復の時間そのものを短くします。「海外のサーバー」を選ぶと、近くにないときの遅さが分かります

TLS のハンドシェイクで鍵がどう作られるかは、ギャラリーのTLS の仕組みで1手ずつ追えます。最後に返ってくる「200 OK」以外の番号は、HTTP ステータスコード一覧にまとめています。

NOTES注意

• このページは実際には通信しません。時間は、ふつうの回線の往復時間から作った目安です。実際の時間は、回線の混み具合やサーバーの場所で大きく変わります
• IP アドレスは、説明に使うために用意されている範囲（192.0.2.0/24 など）と、家の中で使うアドレスだけを使っています
• 話を分かりやすくするため、実際より省いているところがあります。リゾルバはふだん .com などの場所を覚えていて毎回ルートサーバーまでは行かないこと、HTML が何個ものパケットに分かれて届くこと、IPv6 のアドレスを調べる問い合わせ（AAAA）も同時に出ることなどです
• 初めてのサイトでは、ブラウザはまず HTTP/2 でつなぎ、サーバーが HTTP/3 に対応していると知ってから切り替えることが多いです。DNS の HTTPS レコードで、最初から HTTP/3 を使えることもあります