はじめに

英語の技術動画で学ぶシリーズ。今回は ByteByteGo から、ブラウザにURLを打ってEnterを押したあと、画面が出るまでに何が起きているか。

What happens when you type a URL into your browser? (5:20)

実はこの動画、ByteByteGo の System Design 動画シリーズの第1回。登場人物の Bob がURLを入力してEnterを押す、という場面から、裏側の処理を順番に追っていく。

全体の流れ

動画の骨格は4ステップ。各ステップに「遅いので速くする工夫」がセットで出てくるのがポイント。

#	やること	動画での用語	速くする工夫
1	URLを分解する	URL	—
2	ドメイン名をIPアドレスに変換する	DNS lookup	各段階でのキャッシュ
3	サーバーと接続する	TCP connection（HTTPSなら SSL/TLS handshake も）	keep-alive / SSL session resumption
4	リクエストを送って応答を受け取る	HTTP request / response	—

最後に、画像やJSなどの追加リソースについて2〜4を繰り返す。

URLは4つに分けられる。例は http://example.com/...。

部品	役割
scheme	接続に使うプロトコル。`http://` なら HTTP、`https://` なら通信が暗号化される
domain	サイトのドメイン名。例では `example.com`
path	ファイルシステムでいう「ディレクトリ」
resource	ファイルシステムでいう「ファイル」

path と resource の違いは曖昧なことが多い、と動画自身が言っている。「ディレクトリとファイル」と思っておけばよく、2つ合わせてサーバー上の読み込みたいものを指す。

（※動画外の補足）動画では URL を "universal resource locator" と言っているが、正式名称は Uniform Resource Locator。

ブラウザは example.com という名前だけでは、サーバーへのたどり着き方が分からない。名前をIPアドレスに変換する処理が DNS lookup。動画のたとえは「インターネットの電話帳」。

速くするために、DNSの情報はあちこちでキャッシュされる。探す順番はこう。

3 の先ではリクエストが連鎖し、IPアドレスが確定（resolve）するまで続く。多くのDNSサーバーが関わり、その途中の各段階でも答えがキャッシュされる。詳細は別動画で扱う、として深入りしていない。

IPアドレスが分かったら、ブラウザはサーバーと TCP接続 を確立する。

接続の確立にはハンドシェイクが必要で、ネットワークを何往復（round trip）もする。そこで最近のブラウザは keep-alive 接続 を使い、一度張った接続をできるだけ使い回す。

HTTPS の場合はさらに手間がかかる。暗号化された接続を作るための SSL/TLS handshake が追加で必要になり、これが高コスト。ブラウザは SSL session resumption などの工夫でコストを下げている。

接続	何が重いか	軽くする工夫
TCP	ハンドシェイクで複数回の往復	keep-alive（接続の再利用）
TLS（HTTPS時）	暗号化のためのハンドシェイク	SSL session resumption

確立したTCP接続の上で、ブラウザが HTTPリクエスト を送る。サーバーが処理してレスポンスを返し、ブラウザがHTMLを描画する。動画は「HTTP自体はとてもシンプルなプロトコル」とだけ述べている。

HTMLのほかに、JavaScriptのバンドルや画像など追加で読み込むものがあることが多い。その場合ブラウザは、DNS lookup → TCP接続 → HTTPリクエスト、の流れを繰り返して残りを取りに行く。

URLを入力してからページが出るまでは「名前を引く → 接続する → 頼む → 受け取る」の繰り返し。

そして各段階の遅さを、キャッシュ（DNS）と使い回し（keep-alive / session resumption）で隠している。ページ表示が遅いときに「どの段階で時間を食っているか」を考える地図として使える。

DNS の仕組みは動画内で「別の動画で詳しく」と予告されているので、また別途まとめたい。

英語	意味	動画での使われ方
resolve	（名前からIPアドレスを）解決する・確定させる	This sets off a chain of requests until the IP address is resolved.
round trip	ネットワークの往復	It takes several network round trips for this to complete.
keep-alive	接続を張ったままにして再利用する仕組み	modern browsers use something called a keep-alive connection
involved	手間のかかる・込み入った	the process of establishing a new connection is even more involved
expensive	（処理が）高コストな・重い	This handshake is expensive