URL から描画済みページへ

ブラウザーはアドレスを画素へ変えるため、URL 解析、キャッシュ判断、名前解決、TCP と TLS、HTTP、バイト受信を経て、DOM と CSSOM を作り、レイアウト、ペイント、合成を行う。

URL は目的地を示すだけだ。ページまでには複数の段階があり、アドレス、接続、文書、木、配置ボックスという具体的な成果物を次へ渡し、最後に画素を得る。

URL がページになる仕組み

https://vizlearn.app/capstones/projects/url-to-page から、方式 https、ホスト vizlearn.app、パス /capstones/projects/url-to-page を取り出す。方式は HTTPS、ホストは DNS、パスは後の HTTP リクエストに使う。

次にキャッシュを判断する。本レッスンの温かい HTTP キャッシュは HTML とスタイルシートをローカルから返し、冷たい場合はネットワークへ進む。変わるのはバイトの出所で、描画の仕事は残る。キャッシュ HTML も DOM、スタイル付きのボックス、画素にする必要がある。

冷たい HTTPS 読み込みでは、DNS がホストを IP に変える。TCP は SYN、SYN-ACK、ACK で信頼できるバイト流を作る。TLS はその上でサーバー証明書を検証し鍵を導出する。その後 HTTP が GET /capstones/projects/url-to-page を送り、HTML を受け取る。

HTML は DOM、CSS は CSSOM になる。ブラウザーはノードとスタイルを合わせ、描画構造を作り、配置ボックスを計算し、内容を描いてビューポートへ合成する。連鎖は URL の各部 → キャッシュ判定 → IP → socket → TLS 通路 → リクエスト → HTML/CSS → DOM/CSSOM → 描画木 → ボックス → 画素となる。

URL からページまでのステップ

既定は同じ URL の冷たい読み込みで、主要層を全て使う。

1. アドレスバーに元 URL があり、ネットワークにはまだ送らない。
2. https、vizlearn.app、パスを解析し、ホストを DNS へ渡す。
3. DNS、TLS セッション、HTTP キャッシュを調べ、既定では全てミスする。
4. vizlearn.app を問い合わせ、IP 203.0.113.10 を得る。転送先が決まる。
5. オリジンへ SYN、戻る SYN-ACK、確認の ACK で信頼できるバイト流を開く。
6. TLS の ClientHello、サーバー証明書と鍵交換材料、双方のセッション鍵導出へ進む。HTTP はまだ待つ。
7. 安全な通路で GET /capstones/projects/url-to-page を送る。
8. HTML を受け取り、レンダラーが読めるようになるが、まだ最終ページではない。
9. HTML 解析がスタイルシートを発見し、同じ安全な接続で CSS を取得する。成功した HTML/CSS 応答をキャッシュする。
10. HTML と CSS から DOM と CSSOM を作る。
11. 両者を合わせて描画木を作る。display: none のように配置へ参加しないノードも DOM には残る。「見えない」ことが常に「場所を取らない」ことを意味するわけではなく、visibility: hidden は別のケースだ。
12. レイアウトが位置と寸法を決め、ペイントが色、枠、文字を描き、合成が各層を最終ビューポートへ組み立てる。

下の帯は型付きの成果物を記録し、光る項目が次の層の入力になる。古い通信メッセージを薄くし、今の受け渡しを追えるようにする。

読み込み時間の内訳

教材の段階数は固定でも、実際の時間は往復、資源数、解析、スタイルの複雑さ、配置規模、描画範囲、スケジューリングで変わる。通信と描画は別のボトルネックだ。この簡略例の完全キャッシュ命中は通信段階を省くが、DOM、CSSOM、配置、ペイント、合成は残る。

遅さは IP、サーバー、ダウンロード、CSS 待ちの場合も、再配置やペイントの場合もある。まず遅れている成果物を特定する。

境界ケース

• 温かいキャッシュでは本レッスンの HTML と CSS が両方ローカル命中し、DNS/TCP/TLS/HTTP を省く。描画は実行する。
• DNS 失敗では IP がなく、オリジンへ接続しない。表示はローカルエラーページで、サーバー応答ではない。
• 接続拒否では DNS から IP を得ても TCP を拒まれ、socket ができない。TLS、HTTP、本ページの描画へ進まない。名前解決失敗とは別の障害だ。
• 古いキャッシュは実ブラウザーなら条件付きリクエストで再検証しうる。本レッスンは利用可能なクリーンヒットとして扱う。
• 301、302 は URL を置き換え、連鎖の一部をやり直しうる。既定にはない。
• CSS がない、または遅い場合は未装飾 HTML を示せ、後のスタイル更新で再描画しうる。一方、スタイルシートは初回描画を阻むこともある。本レッスンは一枚で依存を示す。

よくある間違い

• URL を HTTP リクエストと同じに扱う。先に解析し、現在の冷 HTTPS モデルでは DNS、TCP、TLS 後に GET を送る。
• DNS 失敗をオリジン障害と呼ぶ。アドレスがなければまだ到達していない。
• キャッシュが描画を省くと思う。バイトを返すだけで、DOM、配置、画素を自動提供しない。
• TCP と TLS を混同する。前者は信頼できる流れ、後者はその上の認証と暗号化。
• DOM を最終ページと考える。構造の後にスタイル、配置、ペイント、合成が必要になる。

モデルの範囲

TCP 上の HTTPS と簡略化した描画を示す。TCP の三メッセージは個別に表示し、TLS は一場面へまとめ、証明書交換は専用レッスンに委ねる。HTTP/3、QUIC、リダイレクト、Service Worker、HTML のストリーミング解析、先読みスキャナー、JavaScript、フォント読み込み、画像デコード、キャッシュ再検証、GPU 詳細は省く。実ブラウザーは多くを重ねて進めるが、ここでは依存が見えるよう分けている。