【仕組み解説】ブラウザはどうやってWebページを表示するのか — 通信・解析・描画を図解

ひよこ

URLを入れるだけでページが出るけど、完成した画面が届いているの？

ペンギン先生

普通のウェブページでは、サーバーからHTML・CSS・画像などを受け取り、ブラウザが画面を組み立てるよ。HTMLは文章の構造、CSSは見た目を指定するもの。材料を取り寄せて組み立てるイメージだね。ただし全部届くまで待つとは限らず、受信と解析、表示を少しずつ進めるんだ。

ひよこ

最初はどこから材料をもらうか調べるの？

ペンギン先生

通常はURLのホスト名についてDNSでIPアドレスを調べ、通信先を見つけるよ。URLのパスまでDNSへ渡して変換するわけではないんだ。すでに名前の情報や接続が使える場合は再利用するし、ページのデータ自体がキャッシュにあれば通信を省けることもあるよ。

ひよこ

通信先が分かったら、暗号化して取りに行くの？

ペンギン先生

HTTPSなら保護された接続を使うよ。HTTP/1.1やHTTP/2ではTCPとTLSを使う構成が一般的。一方、HTTP/3はUDP上のQUICを使うので、必ずTCP接続から始まるわけではないんだ。こうした通信は欠けたデータへの対処などを行うけれど、回線断でも必ず届くという保証ではないよ。

ひよこ

HTMLをもらえば、画像も全部一緒に入っている？

ペンギン先生

画像やCSSが別のURLで指定されていることも多いよ。ブラウザはHTMLを読みながら追加の取得を始め、HTMLの要素をDOMという木構造に整理する。CSSも解析して、どの要素にどんな見た目を適用するかを計算するんだ。ブラウザが先回りして必要なファイルを探す仕組みもあるよ。

ひよこ

文字の位置やボタンの大きさは、どう決めるの？

ペンギン先生

画面に必要な要素とスタイルから、位置や寸法を計算する工程がレイアウトだよ。たとえばCSSのdisplay: noneが指定された要素は、通常は配置するための箱を作らない。そのあと、文字や背景をどう描くかを決めて画素にし、必要に応じてレイヤーを合成して表示するんだ。細かな工程名や実装はブラウザによって違うよ。

ひよこ

JavaScriptは、画面ができた後にだけ動くの？

ペンギン先生

途中で動くこともあるよ。通常のクラシックスクリプトは、HTML解析を止めて取得・実行する場合があるんだ。外部スクリプトにdeferを付けると解析と並行して取得し、解析後に文書順で実行する。asyncは取得できたものから実行するので順序は保証されず、実行中は解析などを待たせることもあるよ。

ひよこ

ページを開いたあと、画像が出て文字がずれるのはどうして？

ペンギン先生

画像が後から届いたり、JavaScriptが内容を変えたりすると、位置や大きさの計算をやり直すことがあるからだよ。最初から画像の表示領域を確保すると、ずれを減らせる場合があるんだ。描画は一度で終了ではなく、操作や更新に応じて必要な工程が繰り返されるよ。

ひよこ

遅いページは、まず回線を速くすればいいのかな？

ペンギン先生

待ち時間が通信なのか、画面を作る処理なのかで対策が違うよ。開発者ツールのNetworkではファイルの取得、Performanceでは長いJavaScript処理やレイアウトなどを確認できる。画像を軽くする、キャッシュを使う、不要な処理を減らすなど、測ってから原因に合う対策を選ぼう。

script要素の違いを整理する

以下は、HTMLに記述した外部スクリプトの基本的な違いです。

deferは外部のクラシックスクリプト向けの属性で、インラインスクリプトには同じ効果がありません。moduleは初めから遅延実行の振る舞いを持ちます。どの指定でも、長いJavaScript処理が画面操作を妨げる可能性はあります。

図は代表的な流れの概略です。キャッシュ・接続の再利用・先読みなどがあるため、毎回すべてを一列に実行するわけではありません。

次に読む：DNSの仕組み、HTTPSの仕組み、キャッシュの仕組み。

参考資料

確認日：2026年9月21日。

• MDN — Populating the page: how browsers work — DNS、HTML解析、DOM/CSSOM、レイアウト・描画・合成と読み込み中の再計算。
• MDN — script element — 通常のスクリプト、async・defer・moduleの読み込みと実行順序。
• MDN — HTTP/3 — HTTP/3はTCPではなくUDP上のQUICを使うこと。