ブラウザがWebページを表示する流れ

URL入力からDNS、接続、HTTP/HTTPS通信、ページ表示までの流れを段階的に学びます。

Webページは、ブラウザにURLを入力した瞬間にそのまま表示されるわけではありません。

実際には、URLの解釈、DNSによるIPアドレスの取得、サーバーへの接続、HTTPSによる安全な通信路の確立、HTTPリクエストの送信、サーバーからのレスポンス受信、ブラウザによる表示処理という流れが順番に発生しています。

ただし、毎回すべての処理が最初から行われるとは限りません。DNSの結果がキャッシュされていたり、すでに接続済みの通信路が再利用されたり、ブラウザキャッシュからデータが読み込まれたりする場合もあります。

この記事では、細かい仕様に入りすぎず、Webページが表示されるまでに何が起きているのかを、実際の通信の流れに沿って整理します。

URLを入力してから何が起きるのか

たとえば、ブラウザのアドレスバーに「https[:]//example.com」という文字列を入力したとします。

ブラウザはまず、入力された文字列を確認します。

それが検索キーワードなのか、WebサイトのURLなのかを判断し、URLであればアクセス先を解釈します。

URLには、主に次のような情報が含まれます。

URLは、人間がWebサイトを指定しやすい形です。

しかし、ネットワーク上で通信相手を探すときには、最終的にIPアドレスが必要になります。

そのため、ブラウザはホスト名からIPアドレスを調べる処理に進みます。

DNSでIPアドレスを調べる

ブラウザは、「example.com」という名前だけではサーバーへ接続できません。

そこで使われるのがDNSです。

DNSは、ドメイン名とIPアドレスを対応させる仕組みです。

ブラウザやOSは、まず自分の中にDNSの結果が残っていないか確認します。過去に同じドメインへアクセスしていれば、DNSキャッシュからIPアドレスを取得できる場合があります。

キャッシュに情報がない場合は、DNSリゾルバに問い合わせます。DNSリゾルバは、必要に応じて複数のDNSサーバーに問い合わせながら、目的のドメイン名に対応するIPアドレスを探します。

ここで取得されるIPアドレスは、必ずしも固定とは限りません。

同じドメイン名でも、地域、DNSの設定、負荷分散、CDNなどの影響で、異なるIPアドレスが返ることがあります。

サーバーへ接続する

IPアドレスが分かると、ブラウザはそのIPアドレスを持つサーバーへ接続します。

Web通信では、接続先のIPアドレスだけでなく、ポート番号も重要です。

通常、HTTPでは80番ポート、HTTPSでは443番ポートが使われます。

HTTP/1.1やHTTP/2では、サーバーへの接続には通常TCPが使われます。

一方、HTTP/3ではQUICという仕組みが使われ、UDP上で動作します。

この記事ではHTTP/2やHTTP/3の詳細には入りませんが、重要なのは、ブラウザがIPアドレスとポート番号を使ってサーバーとの通信路を作るという点です。

また、毎回新しい接続が作られるとは限りません。すでに同じサーバーへの接続が残っている場合、ブラウザは既存の接続を再利用することがあります。

HTTPSで安全な通信路を作る

URLが「https」で始まる場合、ブラウザはサーバーとHTTPSで通信します。

HTTPSは、HTTPをTLSで保護した通信です。

TLSには、主に次の役割があります。

ここで重要なのは、HTTPSは単に「通信を暗号化する仕組み」だけではないということです。

ブラウザは、サーバーから提示された証明書を確認し、その証明書がアクセス先のドメイン名に対して有効かどうかを検証します。

この確認によって、ブラウザは「自分が接続している相手が、意図した相手である可能性が高い」と判断できます。

ただし、HTTPSを使っていても、通信に関するすべての情報が隠れるわけではありません。

たとえば、接続先のIPアドレス、通信が発生した時間、通信量などは、HTTPSだけで完全に隠せるものではありません。

また、環境によっては接続先のドメイン名に関する情報が通信経路上で見える場合もあります。

つまり、HTTPSは通信内容の保護と相手確認に非常に重要ですが、匿名性を完全に保証する仕組みではありません。

HTTP/HTTPSでページを要求する

安全な通信路が作られると、ブラウザはサーバーに対してページを要求します。

この要求をHTTPリクエストと呼びます。

HTTPSの場合は、HTTPリクエストの中身がTLSによって保護された状態で送られます。

たとえば、ブラウザは次のような情報をサーバーへ送ることがあります。

サーバーは、このリクエストを見て、どのデータを返すかを判断します。

同じURLにアクセスしても、ログイン状態、Cookie、言語設定、端末の種類などによって、返される内容が変わることがあります。

サーバーがデータを返す

ブラウザからリクエストを受け取ったサーバーは、HTTPレスポンスを返します。

HTTPレスポンスには、ステータスコード、ヘッダー、本文などが含まれます。

Webページの中心になるのはHTMLですが、HTMLだけでページ全体が完成するとは限りません。

多くのWebページは、複数のデータを組み合わせて表示されています。

ブラウザは最初にHTMLを受け取り、そのHTMLの中で指定されているCSS、JavaScript、画像、フォントなどを追加で取得します。

そのため、1つのWebページを開くだけでも、実際には複数のHTTPリクエストが発生することが多いです。

ブラウザが画面に表示する

サーバーからデータを受け取ると、ブラウザはそれを画面に表示できる形へ変換します。

大まかには、次のような処理が行われます。

ここで押さえるべき点は、ブラウザが完成済みの画面をサーバーから受け取っているわけではないということです。

サーバーはHTML、CSS、JavaScript、画像などの材料を返します。

ブラウザはそれらを解釈し、自分の画面サイズ、設定、対応機能に合わせてページを組み立てます。

そのため、同じWebページでも、PC、スマートフォン、ブラウザの種類、画面幅、設定によって表示が変わることがあります。

1ページでも複数の通信が発生する

Webページの表示で重要なのは、1つのページを開いただけでも、通信先が1つとは限らないことです。

ページ本体は「example.com」から取得していても、画像、広告、アクセス解析、外部フォント、外部スクリプトなどが別のドメインから読み込まれる場合があります。

ユーザーから見ると「1ページを開いた」だけでも、裏側では複数のサーバーと通信している場合があります。

また、ページを開いた直後だけでなく、スクロール、ボタン操作、検索、フォーム入力、動画再生などをきっかけに追加通信が発生することもあります。

近年のWebページでは、最初に最低限のデータだけを読み込み、ユーザー操作に応じて追加データを取得する設計も一般的です。

キャッシュによって通信が省略されることもある

Webページを表示するとき、毎回すべてのデータをサーバーから取得するとは限りません。

ブラウザは、過去に取得した画像、CSS、JavaScriptなどを一時的に保存することがあります。

これをキャッシュと呼びます。

キャッシュが有効な場合、ブラウザは同じデータを再度サーバーから取得せず、端末内に保存されたデータを使うことがあります。

キャッシュは表示速度を上げ、通信量を減らすために重要です。

ただし、匿名性やプライバシーを考える場合、キャッシュやCookieなど、ブラウザ内に残る情報も意識する必要があります。

匿名性を考えるうえで大事な視点

匿名性を考えるうえで重要なのは、Webページを開く行為が単純な1回の通信ではないということです。

Webアクセスでは、DNS、IPアドレス、HTTPS、Cookie、User-Agent、Referer、外部スクリプト、キャッシュなど、複数の要素が関係します。

HTTPSによって通信内容が保護されていても、接続先のIPアドレス、通信タイミング、通信量、ブラウザが送るヘッダー、Cookieによる識別、外部サーバーへの追加通信などは、別の観点で問題になります。

特に重要なのは、「通信内容が暗号化されていること」と「誰がどこへアクセスしたかが分からないこと」は同じではないという点です。

HTTPSは、通信内容を守り、接続相手の正当性を確認するために非常に重要です。

しかし、匿名性を考える場合は、HTTPSだけでなく、DNS、IPアドレス、ブラウザの送信情報、Cookie、外部通信などを分けて見る必要があります。

まとめ

ブラウザがWebページを表示するまでには、複数の処理が段階的に発生します。

まず、ブラウザは入力されたURLを解釈し、ホスト名を確認します。

次に、DNSによってホスト名に対応するIPアドレスを調べます。

IPアドレスが分かると、ブラウザはサーバーへ接続します。

HTTPSの場合は、TLSによって暗号化、改ざん検知、相手確認を行い、安全な通信路を作ります。

そのうえで、ブラウザはHTTPリクエストを送り、サーバーはHTML、CSS、JavaScript、画像などのデータを返します。

ブラウザは受け取ったデータを解析し、画面に表示します。

さらに、1ページの表示中にも、画像、広告、解析タグ、外部フォント、外部スクリプトなどによって、追加通信が発生する場合があります。

Webページを開くという行為は、見た目よりも多くの通信と処理で成り立っています。

この流れを理解すると、Webの基本構造だけでなく、匿名性やプライバシーを考えるときに見るべきポイントも整理しやすくなります。

関連ツール

関連記事