やあ。Webブラウザという「魔法の箱」の裏側へようこそ。

普段、私たちが何気なくWebサイトを見ているとき、ブラウザは裏側でとんでもない職人芸を披露しています。今日は、その中でも特に「なぜWebサイトは読み込み途中にパッと表示されるのか？」という謎を解く鍵、「インクリメンタルパース（逐次解析）」についてお話ししよう。

難しい言葉に聞こえるけれど、心配はいらないよ。一緒に紐解いていこう。

—

想像してみてほしい。君がレストランに入ったとき、二つの注文の仕方があるとしよう。

Webブラウザは後者の「回転寿司」スタイルなんだ。

もしブラウザが「HTMLファイルを全部読み込んで、完璧に解釈し終わるまで画面を見せない」というルールだったら、今のWebサイトはあまりに重すぎて、君は真っ白な画面の前で永遠に待たされることになる。

そうではなく、ブラウザは「届いた分だけ、すぐに料理（描画）を始める」。これが「インクリメンタルパース」の正体だ。

ブラウザの中には、HTMLという「設計図」を読み取って、画面という「家」を建てる職人たちが住んでいる。

1. ネットワーク担当： サーバーからHTMLの断片を受け取る。
2. パース担当： 受け取った断片を「DOM（ドム）」という木の枝のようなデータ構造に組み立てる。
3. 描画担当： 組み立てた枝を見て、色を塗り、形を作る。

ここでのポイントは、「設計図の最後が届くのを待たずに、屋根の形がわかったらすぐに屋根を作り始める」という姿勢だ。だから、サイトを開いた瞬間にヘッダーや文字の一部がポッと現れるんだね。

百聞は一見にしかず。実際にブラウザがどう動いているか、あえて「読み込みをわざと遅くする」コードで実験してみよう。

まずは、この文字が一番最初に出るよ！

この文字は、3秒間待った後じゃないと出てこないんだ。

このコードをブラウザで開くと、こうなるはずだ。
1. `

` の文字がまず表示される。
2. 3秒間、ブラウザが固まる（スクリプトの実行中は描画が止まるからだ）。
3. その後、`

` の文字がパッと現れる。

どうかな？ブラウザが「上のHTMLを読み終えた時点で、一度画面を描きに行っている」という証拠だよね。これがインクリメンタルパースの泥臭くも愛おしい現実だ。

この仕組みを知ると、なぜ「JavaScriptはなるべくHTMLの最後（``の手前）に書け」と言われるのかも分かってくるはずだ。

もし、画面のてっぺんに重たいJavaScriptファイルを置いてしまうと、ブラウザは「あ！プログラムを動かさなきゃ！画面の描画は一旦中断だ！」と判断して、せっかくのインクリメンタルパースを止めてしまうんだ。

だから、画面の表示を速くしたいなら：

Webブラウザは、君が少しでも快適にネットサーフィンを楽しめるように、コンマ数秒の世界で必死に「届いたものから表示する」という工夫を繰り返している。

もしWebサイトが重いと感じたら、「ブラウザが今、一生懸命パズルを組み立てている最中なんだな」と想像してみてほしい。そうすると、コードを書くときも「どうすればブラウザが楽に組み立てられるかな？」という優しい視点が持てるようになるはずさ。

君の作るWebサイトも、きっとこのブラウザの職人たちに愛される素敵なものになる。焦らず、一歩ずつ進んでいこう。大丈夫、君ならできるよ！