【ITニュース解説】What happens when you enter a URL in your browser?

ブラウザでWebサイトのアドレス、URLを入力してEnterキーを押すと、瞬く間にページが表示される。この「あっという間」の裏側では、目に見えない多くの技術が連携し、複雑な処理が行われている。システムエンジニアを目指す上で、この一連のプロセスを理解することは、Webの仕組みを深く知り、将来のシステム設計や問題解決に役立つ重要な基礎知識となる。

まず、ブラウザは入力されたURLを解析する。URLは「https://dev.to/some-article」のように、通信方法を示すスキーム（https）、Webサイトの場所を示すホスト名（dev.to）、サイト内の特定のページを示すパス（/some-article）の三つの部分から構成される。スキームは通信に使うポート番号（HTTPSなら443、HTTPなら80）を決定する。ブラウザはネットワーク接続を始める前に、表示しようとしているページが手元のキャッシュにないか、また、そのサイトが常にHTTPSでの安全な接続を要求しているか（HSTS）を確認し、必要に応じて自動的にHTTPSに切り替える。

次に、ブラウザはホスト名である「dev.to」を、コンピュータが通信に使うIPアドレスに変換する必要がある。この「名前解決」の役割を担うのがDNS（Domain Name System）だ。コンピュータは名前ではなく、数字の羅列であるIPアドレスで通信するため、この変換は不可欠なステップとなる。通常、名前解決はキャッシュから行われることが多い。ブラウザは自身のキャッシュ、OSのキャッシュ、ルーターのキャッシュ、そしてインターネットサービスプロバイダ（ISP）などが提供するDNSサーバー（再帰リゾルバー）の順に確認していく。もしどこにもキャッシュがなければ、再帰リゾルバーがインターネット上のルートサーバーから関連するDNSサーバーを順にたどり、最終的に正しいIPアドレスを取得する。記事の例のように複数のIPアドレスが返されるのは、CDN（Content Delivery Network）を利用しており、ユーザーに最も近いサーバーへ接続することで表示速度を向上させているためだ。

IPアドレスが特定されると、ブラウザはそのIPアドレスのサーバーのポート443番（HTTPSの場合）に接続を開始する。この接続確立にはTCP（Transmission Control Protocol）が使われる。TCPは信頼性の高い通信を保証するためのプロトコルで、通信を始める前に「スリーウェイハンドシェイク」と呼ばれる三段階の挨拶を交わす。あなたのコンピュータが「通信したい」と伝え、サーバーが「準備できた」と返答し、あなたのコンピュータが「始めよう」と確認する。このやり取りだけでデータの往復が発生するため、サーバーとの距離が遠いほど時間がかかる。そのため、一度確立した接続はできる限り再利用することが、Webのパフォーマンスにとって非常に重要となる。

HTTPSでの接続の場合、TCP接続が確立した直後には、通信内容を暗号化するためのTLS（Transport Layer Security）という仕組みの確立が始まる。このTLSハンドシェイクもいくつかのやり取りを必要とする。ブラウザは自身が対応するTLSのバージョンや暗号化方式の候補をサーバーに伝え、サーバーはそれらの中から選択したものと、自身の身元を証明するデジタル証明書を返信する。ブラウザはこの証明書に記載されたホスト名が正しいか、有効期限が切れていないか、信頼できる認証局によって発行されたものかを厳しく確認する。これらの検証が成功して初めて、ブラウザはそのサーバーが本物であると判断し、安全な通信相手として認める。その後、ブラウザとサーバーは共通の暗号鍵を生成し、以降のすべてのデータは暗号化されてやり取りされる。このTLSハンドシェイクの過程で、ブラウザとサーバーは、使用するHTTPプロトコルのバージョン（例えばHTTP/2）についても合意を形成することがある。

安全な通信路が確立されると、ブラウザはいよいよWebページの具体的な内容を要求するHTTPリクエストをサーバーに送信する。HTTP/2を使用する場合、リクエストはバイナリ形式のフレームとして送られるが、その意味は「GET /」のようにシンプルで、「トップページの内容を取得したい」といった情報だ。このリクエストには、ブラウザが受け付けられるデータ形式や、ログイン情報を示すクッキーなどの追加情報（ヘッダー）も含まれる。サーバーはこれらのリクエストを受け取り、処理した結果として応答を返す。応答には、処理の成功を示す「200」のようなステータスコード、データの種類を示すヘッダー情報、そして最終的にWebページのHTMLデータそのものが含まれる。応答ヘッダーからは、そのデータがCDNのキャッシュサーバーを経由して送られてきたことや、元のアプリケーションがどこで動作しているかなどの情報が読み取れることもある。

HTMLデータがブラウザに届き始めると、ブラウザは直ちにページのレンダリング、つまり画面への描画を開始する。ブラウザは全てのHTMLファイルがダウンロードされるのを待たずに、受信しながら順次解析を進める。まずHTMLを解析して、ページの要素の構造を表す「DOM（Document Object Model）」というツリー構造を構築する。次にCSSを解析して、スタイル情報を表す「CSSOM（CSS Object Model）」ツリーを作る。これら二つのツリーを組み合わせて、実際に画面に表示される内容を定義する「レンダーツリー」が生成される。その後、各要素が画面上のどこに配置されるか（レイアウト）が計算され、最終的にピクセルに色を塗り（ペイント）、Webページが画面に表示される。HTMLには、CSSファイル、JavaScriptファイル、画像、フォントなど、さらに多くのリソースへのリンクが含まれており、これらも並行してダウンロードされる。ただし、JavaScriptは特殊で、HTMLの解析中にJavaScriptのコードに出会うと、ブラウザは一時的に解析を停止し、JavaScriptをダウンロードして実行する。これはJavaScriptがページの構造や内容を変更する可能性があるためだが、ページの表示速度を遅らせる原因にもなるため、「defer」や「async」といった属性を使って読み込みを最適化することが一般的だ。

この一連のプロセスにかかる時間は、非常に短いものだ。これらすべての段階を経てHTMLドキュメントのダウンロードが完了するまでに数十ミリ秒しかかからないこともある。しかし、これはあくまでHTMLファイル自体の時間であり、その後のCSS、JavaScript、画像の読み込み、そして最終的な画面への描画まで含めると、Webページが完全に表示されるまでにはさらに時間がかかる。サイトの表示が遅いと感じた時、ブラウザの開発者ツールでこれらの段階ごとの時間を確認すれば、どこで遅延が発生しているかを特定できる。Webサイトのパフォーマンスを改善するための多くの技術や工夫は、この一連のステップのどこかの効率を高めるために存在する。Webページが表示されるまでのわずかな時間の中で、これほど多くの技術が連携し、正確に動作していることを理解することは、システムエンジニアとしての視野を大きく広げる貴重な経験となるだろう。