【仕組み解説】ブラウザはどうやってWebページを表示しているのか — URLからレンダリングまで図解

実はあの「一瞬」の間に、ものすごくたくさんの工程が走っているんだよ。大きく分けると「ネットワーク通信」と「レンダリング」の2フェーズがあるんだ。まずネットワーク側から説明するね。

そうそう。最初にブラウザがやるのは「DNS解決」だよ。URLに含まれるドメイン名（例えば alteil.net）を、実際の通信先であるIPアドレスに変換する作業だね。電話帳で名前から電話番号を調べるようなイメージだよ。

まだもうひと手間あるんだ。次に「TCP接続」を確立して、さらにHTTPSサイトなら「TLSハンドシェイク」で暗号化の準備をするよ。TCPは「ちゃんとデータが届く」ことを保証する仕組みで、TLSは「通信を盗み見されない」ようにする仕組みだね。この2つが揃って初めて、ブラウザはサーバーにHTTPリクエストを送れるんだよ。

その通り！サーバーがHTTPレスポンスとしてHTMLファイルを返してくれるよ。ただしHTMLの中には「このCSSも読み込んで」「このJavaScriptも必要」「この画像も表示して」っていう参照がたくさん入っているから、ブラウザは追加のリクエストも次々に送ることになるんだ。

ここからがレンダリングのフェーズだよ。まずHTMLを解析して「DOMツリー」を構築するんだ。DOMはDocument Object Modelの略で、HTMLの構造をツリー状のデータに変換したものだね。同時にCSSも解析して「CSSOMツリー」を作るよ。

この2つを合体させて「レンダーツリー」を作るんだ。レンダーツリーには「実際に画面に表示される要素」だけが含まれるよ。たとえば display none が指定された要素はDOMにはあるけど、レンダーツリーからは除外されるんだ。そしてレンダーツリーができたら「レイアウト」で各要素の位置とサイズを計算して、「ペイント」で実際にピクセルを描画するよ。

最後に「コンポジット（合成）」という工程があるよ。ブラウザは描画を複数のレイヤーに分けていて、最後にそれらを重ね合わせて1枚の画面にするんだ。GPUを使って高速に合成するから、アニメーションもスムーズに動くんだよ。ここまでの一連の流れを「Critical Rendering Path（クリティカルレンダリングパス）」と呼ぶんだ。

これがすごく重要なポイントだよ。通常のscriptタグはHTMLの解析（パース）をブロックするんだ。つまりscriptタグに出会うとDOMの構築が一時停止して、JavaScriptのダウンロードと実行が終わるまで待つことになるよ。

async属性とdefer属性が用意されているよ。asyncを付けるとJavaScriptのダウンロードがHTML解析と並行して行われて、ダウンロード完了次第すぐに実行されるんだ。deferも並行ダウンロードだけど、実行はHTML解析が完了してから行われるよ。ページの表示速度を最適化するなら、deferを使うのが定番だね。

現代のブラウザエンジン（ChromeのBlink、FirefoxのGecko、SafariのWebKitなど）は投機的パース（Speculative Parsing）という技術も使っていて、HTMLを解析しながら先回りしてCSSやJavaScriptのダウンロードを開始するんだ。さらにHTTP/2やHTTP/3では1つの接続で複数のリソースを同時にやり取りできるから、ネットワーク効率もどんどん上がっているよ。URLを打って一瞬で表示される裏には、こうした最適化の積み重ねがあるんだね。