ブラウザのしくみとは? URLを入れてからページが表示されるまで

身近なところでは

Chrome、Safari、Edge、Firefoxは、どれもブラウザです。アプリの中でリンクを開いたときの画面も、多くはブラウザの部品を使っています。

Webページのデータは、遠くのコンピュータに置かれています。求めに応じてデータを渡すコンピュータを「サーバ」と呼びます。ブラウザは、サーバに頼んでデータを受け取り、人が読める画面に仕上げる係です。

この記事では、URLを入れてからページが表示されるまでを順に追います。ネットワークの細かい動きは別の記事に任せます。

URLを入れてから表示されるまでの流れ

Webページの場所を表す文字列をURLと呼びます。「https://www.example.com/news/」のような形です。先頭の「https」は通信の方式、「www.example.com」はサイトの名前、その後ろはサイトの中の場所です。

URLを入れたあと、ブラウザは大きく6つの段階を進みます。ここでは話を簡単にするため、よくある流れだけを示します。

②では、サイトの名前から、通信に使う番号を調べます。この番号をIPアドレス、調べるしくみをDNSと呼びます。くわしくは「DNSとは?」で説明しています。

③では、まずサーバとの通信の道をつなぎ、次に暗号の鍵を取り決めます。いまは多くのサイトが、途中で読まれないように暗号を使うHTTPSです。この準備の手順は「TCPとUDPの違い」と「HTTPSとは?」で扱っています。

「ページをください」「どうぞ」: HTTPの会話

つながったら、ブラウザは「このページをください」という依頼を送ります。サーバは、結果を表す番号をつけて、ページのデータを返します。この会話の形を決めた決まりごとをHTTPと呼びます。

返事の先頭につく3けたの番号をステータスコードと呼びます。「200」は成功、「404」はそのページが見つからない、という意味です。

最初に届くのは、ふつうHTML(次の節で説明)です。ブラウザはこれを読み進め、「この画像も使う」といった記述を見つけるたびに追加の依頼を送ります。1ページで何十回も依頼を送ることは珍しくありません。広告や動画などは、別の会社のサーバから届くこともあります。データが届くしくみそのものは「インターネットはどうやってデータを届けるの?」で説明しています。

HTML・CSS・JavaScript: 3つの材料の役割

Webページの材料は、主に3種類の文字のファイルです。書き方の決まりは、国際的な団体が公開しています。

HTML: 中身と、その組み立て

HTMLは、「ここは見出し」「ここは段落」「ここに画像」のように、文書の中身とその役割を書くものです。役割は、山かっこで囲んだしるしで表します。例えば次の1行は、「お知らせ」が見出しであることを表します。

<h1>お知らせ</h1>

CSS: 見た目の指定

CSSは、文字の色や大きさ、並べ方などの見た目を指定するものです。次の1行は、「見出しは青い文字で表示する」という指定です。

h1 { color: blue; }

中身と見た目を分けておくと、切り替えがしやすくなります。例えば同じ中身を、スマホでは縦1列、パソコンでは横に並べられます。

JavaScript: 動きを加えるプログラム

JavaScriptは、ページの上で動くプログラムです。ボタンを押したときの反応や、ページを開き直さずに中身を入れ替える動きを受け持ちます。次の1行は、見出しの文字を「ようこそ」に書き換える命令です。

document.querySelector("h1").textContent = "ようこそ";

ブラウザは、JavaScriptのよく使われる部分を、実行しながらCPUの命令に翻訳して速くしています。この翻訳のしかたをJITコンパイルと呼びます。翻訳のしくみは「コンパイラとは?」で説明しています。

ページを組み立てて、画面に描く

材料がそろうと、ブラウザは画面に描く作業を進めます。ここでは4つの段階に分けます(実際はもっと細かく、並行して進みます)。

1. HTMLを木の形に整理する: 「ページの中に見出しと段落があり、段落の中にリンクがある」という親子関係を、木の形のデータにします。
2. 見た目を決める: CSSの指定を1つずつの部品に当てはめ、色や大きさを決めます。
3. 位置を計算する: 画面の幅に合わせて、各部品をどこに、どの大きさで置くかを決めます。
4. 描く: 文字や画像を点(画素)の集まりに直し、画面に描きます。重ねる作業には、映像を得意とするGPUも使います。

1番の木の形のデータをDOMと呼びます。JavaScriptが「見出しを書き換える」ときに書き換えているのは、このDOMです。DOMが変わると、ブラウザは必要な分だけ2〜4をやり直します。

動きをなめらかに見せるには、多くの画面で1秒に60回ほど描き直す必要があります。1回あたりにすると約16.7ミリ秒(1ミリ秒は1000分の1秒)です。JavaScriptが重い計算でこの時間を使い切ると、スクロールがカクつきます。

2回目に開くと速い理由: キャッシュ

一度受け取った材料は、端末の中にしばらく保存しておきます。この控えを「キャッシュ」と呼びます。もう一度開くとき控えが使えれば、サーバに取りに行く手間を省けます。

控えをいつまで使ってよいかは、サーバが返事に書いて指示します。期限内なら、ブラウザはサーバに聞かずに控えを使います。

期限が切れた控えは、すぐには捨てません。「手元の版から変わりましたか?」とサーバに確かめます。変わっていなければ、サーバは「304」という番号をつけた短い返事だけを返し、中身は送りません。届くデータがずっと少ないので、そのぶん速く済みます。

DNSで調べた番号も覚えておくので、②を省けることもあります。

Cookie: サイトがブラウザに預ける小さなメモ

HTTPの会話は、1回ごとに独立しています。そのままでは、サーバは「さっきログインした人」と「今の依頼」が同じ人だと分かりません。そこでサーバは、返事に小さな文字のデータを添えて、ブラウザに保存させます。

ブラウザは、次に同じサイトへ依頼を送るとき、このデータを自動で添えて送ります。このしくみをCookie(クッキー)と呼びます。ログインの状態や買い物かごの中身を覚えておくのに使われます。

ファーストパーティとサードパーティ

いま見ているサイト自身が預けるCookieを、ファーストパーティCookieと呼びます。これに対し、ページに埋め込まれた広告などの、別の会社が預けるCookieをサードパーティCookieと呼びます。

同じ広告会社の広告が、たくさんのサイトに埋め込まれていたとします。広告会社は、どのサイトでも同じCookieを受け取れます。すると、ニュースサイトと料理サイトを見たのが同じ人だと、つなげられてしまいます。こうして人の行動を追いかけることを「トラッキング」と呼びます。

ブラウザが追跡を制限してきた流れ

こうした追跡を防ぐため、ブラウザはサードパーティCookieを制限してきました。Safariは2020年3月に、サードパーティCookieを標準ですべて止めました。Firefoxは2022年6月に、Cookieをサイトごとに別の箱に分けて保存する方式を、パソコン版の標準にしました。箱が別なら、ほかのサイトで預けたIDは出てきません。

Chromeは2020年1月に、サードパーティCookieを将来なくす計画を発表しました。しかし延期を重ね、2024年7月にこの計画をやめました。2025年4月には、今の設定画面で利用者が止めるかを選ぶ方式を続けると決めました。標準では受け入れ、シークレットモード(履歴を残さない画面)では止めます(2026年10月時点)。

ブラウザの「エンジン」: 中身は3つの系統

ブラウザのうち、HTMLやCSSを読んで画面を組み立てる中心の部分を「ブラウザエンジン」と呼びます。外側の画面は会社ごとに違っても、エンジンは共通のことがあります。いま広く使われているのは、次の3つの系統です。

Blinkは、2013年にWebKitから分かれて生まれました。Microsoftは2020年1月、Edgeの中身をChromiumをもとにしたものに切り替えました。そのため、ChromeとEdgeは見た目は違っても、ページの組み立て方はほぼ同じです。

iPhoneとiPadでは、Appleの決まりにより、ブラウザはWebKitを使うのが原則です。iPhone版のChromeも、ふつうは中身がWebKitです。例外として、EUと日本では法律に合わせ、条件を満たせば別のエンジンも使えます(EUはiOS 17.4、日本はiOS 26.2から。2026年10月時点)。

エンジンの違いが大事な理由は2つです。同じページでも、エンジンによって表示や動きが少し違うことがあります。また、あるエンジンに弱点が見つかると、それを使うすべてのブラウザが影響を受けます。

ブラウザがメモリを多く使う理由

ブラウザがメモリを多く使う大きな理由は、ページを安全に分けて動かす設計にあります。OSは、実行中のプログラムを「プロセス」という単位で管理し、それぞれに別のメモリを貸します(「OSとは?」)。Chromeは2008年の公開当初から、ページの表示を受け持つ部分を、タブなどごとに別のプロセスに分けてきました。1つのタブが止まっても、ほかのタブは動き続けられます。

2018年には、CPUの設計上の弱点を突く攻撃が知られるようになりました。この攻撃をSpectreと呼びます。同じプロセスの中なら、ほかのサイトのデータを盗み見られるおそれがありました。そこでChromeは2018年のChrome 67から、パソコン版でサイトごとにプロセスを分ける方式を標準にしました。Firefoxも2021年に、同じ考え方の方式を発表しています。

さらに、ページを表示するプロセスは、できることを厳しく絞った状態で動かします。ファイルや機器に直接さわれないようにするのです。この閉じ込めを「サンドボックス」と呼びます。悪いページがエンジンの弱点を突いても、被害がその中で止まりやすくなります。

プロセスを分けると、それぞれに同じ部品の控えが要るので、メモリの使用量は増えます。ブラウザは、安定と安全のためにメモリを多めに使っているのです。足りないときは、使っていないタブを閉じるのが効果的です。

ブラウザを安全に使う基本

ブラウザは、知らない相手から届いたプログラムを毎日実行するアプリです。そのためエンジンの弱点は攻撃の入り口になりやすく、修正がひんぱんに配られます。Chromeは2021年から、新しい版を4週間ごとに出しています。

多くのブラウザは自動で更新を受け取りますが、パソコンのChromeのように、再起動するまで反映されないものがあります。「更新」や「再起動」の表示が出たら、早めに従うのが基本です。スマホでは、OSとアプリの更新を止めないようにしましょう。iPhoneのブラウザの多くは、WebKitの修正をOSの更新で受け取ります。

ブラウザに機能を足す追加のプログラムを「拡張機能」と呼びます。中には、見ているすべてのページの中身を読める権限を求めるものがあります。入れるのは公式のストアからだけにし、求める権限が機能に見合うか、作った人が信頼できるかを確かめましょう。

本物そっくりの偽サイトにも注意が必要です。見分け方と防ぎ方は「フィッシング詐欺とは?」で説明しています。

よくある誤解

数字で見る

もっと詳しく学ぶ

• 違いを表で見る: HTTP/1.1・HTTP/2・HTTP/3の違い
• 違いを表で見る: プロセスとスレッドの違い、コンパイラ・インタプリタ・JITの違い
• 計算で試す: データ転送時間の計算ツール(ページが届くまでの時間を見積もる)
• 次の一歩の用語: 同一オリジンポリシー(ほかのサイトのデータを読ませない決まり)、クロスサイトスクリプティング(XSS)(サイトの弱点を突く攻撃)
• 文字が化けるしくみ: 文字コードとは?
• 速く届ける工夫: CDN(コンテンツデリバリネットワーク)(近くに控えを置いて配るしくみ)