ブラウザは、目的のサーバーを探してファイルを受け取り、画面として組み立てる。
URLを入力してから表示されるまでに、いくつもの仕事をすばやく進めています。
URL入力から表示までの5ステップ
ブラウザはWebページそのものを最初から持っているわけではありません。URLを手がかりに目的のサーバーを探し、ページ作りに必要なファイルを受け取って表示します。
実際には暗号化された通信の準備やキャッシュの確認なども行われますが、まずはこの5ステップを押さえれば全体像をつかめます。
DNSでサーバーの住所を探す
URLに含まれるドメイン名は、人が覚えやすいWebサイトの名前です。しかし、通信相手を見つけるには、数字で表されるIPアドレスが必要です。
DNSは、ドメイン名に対応するIPアドレスを教えてくれる仕組みです。電話帳や住所録から目的地を探すイメージに近い役割を持ちます。
- ドメイン名を確認URLから接続したいサイト名を読み取る
- DNSへ問い合わせ対応するIPアドレスを教えてもらう
- サーバーへ接続見つけた住所を使って通信を始める
サーバーからページの材料を受け取る
接続先が分かると、ブラウザはサーバーへ「このページをください」とリクエストを送ります。サーバーはリクエストに応じてHTMLを返し、ブラウザはHTMLを読みながらCSS・JavaScript・画像なども追加で取得します。
見出しや文章、画像など、ページの構造を表す。
色・大きさ・配置など、ページの見た目を整える。
操作したときの動きや、ページ内のビジュアルを加える。
この「お願い」と「返事」は、リクエストとレスポンスと呼ばれます。ページによっては、多数のファイルを何度もやり取りします。
ブラウザが材料を画面へ組み立てる
ファイルを受け取っただけでは、まだ画面は完成していません。ブラウザはHTMLとCSSを解析して配置や見た目を決め、画面へ描画します。JavaScriptが実行されると、内容や表示が後から変化することもあります。
HTMLとCSSを読み、ページの構造と見た目を理解する。
各要素の大きさと、画面内の位置を計算する。
色や文字、画像を画面上に描いて表示する。
ここまでのまとめ
Webページの表示速度は、サーバーから届く速さだけでは決まりません。ファイルの量や、ブラウザが画面を組み立てる処理の重さも関係します。
そのためWeb開発では、画像を軽くする、不要なJavaScriptを減らす、重要な内容を早く描画するといった工夫を行います。表示体験を測る指標として、Core Web Vitalsも使われています。
ページを開いたら、ブラウザは「住所を探す → 材料を受け取る → 画面を組み立てる」と覚えておくと、表示の仕組みを整理しやすくなります。