「作ったページが相手に届くまで」で、「返ってきたHTMLをブラウザーが読み、CSSで見た目を作り、JavaScriptで動かす」と一行で書きました。ここでは、その一行の中身を開けてみます。

ブラウザーの中で何が順番に起きているのかが分かると、「なぜか表示が崩れる」「JavaScriptが動かない」といった場面で、どの段階でつまずいているのかを指させるようになります。原因を指させるということは、直せるということです。

1. 受け取ってから表示するまでの4ステップ

ブラウザーは、返ってきたファイルを次の順で処理します。

  1. パース … HTMLを上から読んで解釈する
  2. DOM構築 … 読んだHTMLを、木構造（DOM）として組み立てる
  3. レンダリング … DOMにCSSを合わせて、実際の見た目を計算して描く
  4. JS実行 … JavaScriptを動かし、DOMを書き換えて動きをつける

大事なのは、これが上から順に進むということです。ブラウザーはHTMLの全体を一度に眺めているわけではなく、頭から1行ずつ読み進めています。

2. パースとDOM構築 ― 文字列を木にする

サーバーから届いた時点では、HTMLはただの文字列です。ブラウザーはこれを上から読み、タグを見つけるたびに「ここから見出しが始まる」「ここで段落が閉じた」と解釈していきます。これがパースです。

解釈した結果を、親子関係のある木の形に組み立てたものが DOM です。「HTMLの書き方」で見た入れ子の構造が、そのままブラウザーの中の木になります。

タグの閉じ忘れで表示が崩れるのは、この段階で意図と違う木が組み上がるからです。人間には「閉じ忘れ」に見えても、ブラウザーからは「そういう入れ子」として読めてしまいます。

3. レンダリング ― 木に見た目を着せる

木ができたら、そこにCSSを合わせます。それぞれの要素がどれくらいの大きさで、どの位置に来るのかを計算し（レイアウト）、実際に色を塗ります（ペイント）。

ここで重要な性質がひとつあります。ブラウザーは、CSSを読み終わるまで描画を始めません。読みかけのCSSで描いてしまうと、直後に色や配置が変わって画面がちらつくからです。

つまりCSSは、初期表示の速さに直接効きます。大きなCSSを読み込んでいるあいだ、利用者は白い画面を見せられることになります。

4. JS実行 ― 読み込む位置で挙動が変わる

JavaScriptは、さらに強くこの流れに割り込みます。ブラウザーは <script> を見つけると、そこでHTMLの解釈をいったん止めて、スクリプトを取りに行き、実行し終わってから続きを読みます。

そのため、<head> の中で重いJavaScriptを読むと、本文が表示されるのがそのぶん遅れます。対処は2つです。

<!-- 1. </body> の直前に置く -->
<script src="/main.js"></script>
</body>

<!-- 2. defer を付ける（HTMLを読み終えてから実行される） -->
<head>
  <script src="/main.js" defer></script>
</head>

もうひとつ、ありがちなつまずきがあります。<head> に置いたスクリプトから要素を取ろうとすると、null が返ってくるというものです。

// <head> で実行すると、この時点ではまだ button が読まれていない
const button = document.querySelector("button");
button.addEventListener("click", ...);   // button は null なのでエラーになる

「JavaScriptが動かない」の相当な割合が、コードの間違いではなく実行された順番の問題です。「書いた順」ではなく「読み込まれた順」で画面ができる、という感覚が持てると強いです。

5. 開発者ツールで実際に覗く

ここまでの流れは、想像で終わらせずに自分の目で確認できます。ブラウザーの開発者ツール（右クリック →「検証」、またはF12）を開いてみてください。

  • Elements（要素）タブ … いままさに組み上がっているDOMが見られます。どのCSSがどの要素に当たっているか、打ち消されているかもここで分かります。「表示が崩れる」はこのタブで追います。
  • Console（コンソール）タブ … JavaScriptのエラーが出ます。「動かない」と思ったら、まずここを見ます。
  • Network（ネットワーク）タブ … HTML・CSS・JavaScript・画像が、いつ・どの順で・どれくらいの時間で届いたかが一覧で出ます。

Networkタブに並ぶのは、まさに「作ったページが相手に届くまで」で追いかけた往復そのものです。一番上の行がHTMLで、そこから下にCSSや画像が続いているはずです。2つの記事はここでつながります。

まとめ

  • ブラウザーは パース → DOM構築 → レンダリング → JS実行 の順で画面を作る。
  • CSSは読み終わるまで描画を止め、<script> はそこでHTMLの解釈を止める。
  • そのため「読み込み順」で表示も挙動も変わる。defer や置き場所はそのための道具。
  • 開発者ツールの Elements / Console / Network で、この流れを自分で確認できる。