はじめに
英語の技術動画で学ぶシリーズ。今回は ByteByteGo から、ブラウザにURLを打ってEnterを押したあと、画面が出るまでに何が起きているか。
実はこの動画、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つの部品
URLは4つに分けられる。例は http://example.com/...。
| 部品 | 役割 |
|---|---|
| scheme | 接続に使うプロトコル。http:// なら HTTP、https:// なら通信が暗号化される |
| domain | サイトのドメイン名。例では example.com
|
| path | ファイルシステムでいう「ディレクトリ」 |
| resource | ファイルシステムでいう「ファイル」 |
path と resource の違いは曖昧なことが多い、と動画自身が言っている。「ディレクトリとファイル」と思っておけばよく、2つ合わせてサーバー上の読み込みたいものを指す。
（※動画外の補足）動画では URL を "universal resource locator" と言っているが、正式名称は Uniform Resource Locator。
② DNSでIPアドレスを調べる
ブラウザは example.com という名前だけでは、サーバーへのたどり着き方が分からない。名前をIPアドレスに変換する処理が DNS lookup。動画のたとえは「インターネットの電話帳」。
速くするために、DNSの情報はあちこちでキャッシュされる。探す順番はこう。
- ブラウザ自身のキャッシュ（短時間だけ保持）
- OSのキャッシュ（こちらも短時間）
- どちらにも無ければ、インターネット上の DNS resolver に問い合わせる
3 の先ではリクエストが連鎖し、IPアドレスが確定（resolve）するまで続く。多くのDNSサーバーが関わり、その途中の各段階でも答えがキャッシュされる。詳細は別動画で扱う、として深入りしていない。
③ サーバーと接続する（TCP / TLS）
IPアドレスが分かったら、ブラウザはサーバーと TCP接続 を確立する。
接続の確立にはハンドシェイクが必要で、ネットワークを何往復（round trip）もする。そこで最近のブラウザは keep-alive 接続 を使い、一度張った接続をできるだけ使い回す。
HTTPS の場合はさらに手間がかかる。暗号化された接続を作るための SSL/TLS handshake が追加で必要になり、これが高コスト。ブラウザは SSL session resumption などの工夫でコストを下げている。
| 接続 | 何が重いか | 軽くする工夫 |
|---|---|---|
| TCP | ハンドシェイクで複数回の往復 | keep-alive（接続の再利用） |
| TLS（HTTPS時） | 暗号化のためのハンドシェイク | SSL session resumption |
④ HTTPでやり取りして描画する
確立した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 |