こんにちは！Webブラウザの仕組みの深淵を覗こうとしているあなた、ようこそ。
「なぜかWebサイトの表示がワンテンポ遅れる」「画面が一瞬真っ白になる」。そんな経験はありませんか？実はそれ、ブラウザという「職人」が、ある特定の材料に振り回されて作業を止めてしまっているからなんです。
今日は、ブラウザがページを描画する際、なぜ「CSS」と「JavaScript」がレンダリングの邪魔をしてしまうのか、そのメカニズムを紐解いていきましょう。難しい理屈は一旦置いて、身近な例え話で解説しますね。
—
ブラウザは「超優秀だけど真面目すぎる職人」
ブラウザは、HTMLファイルという「設計図」を受け取ると、上から順番に読み込んで画面という「家」を建て始めます。この作業を「レンダリング」と呼びます。
この職人さん、非常に優秀なのですが、ひとつだけ「こだわりが強すぎる」という弱点があります。
1. CSS（外部スタイルシート）という「色塗りの指示書」
HTMLが「骨組み」なら、CSSは「壁紙の色や家具の配置」を決める指示書です。
ブラウザがHTMLを読んでいる途中で、`` という外部CSSのタグを見つけると、職人さんは「おっと、この壁紙の色が確定しないと、部屋の見た目がチグハグになっちゃう！先に色を完璧に理解しなきゃ！」と考えて、家を建てる作業を一旦ストップしてしまいます。
これが「レンダリングブロック」の正体です。CSSが読み込まれるまで、画面は真っ白なまま。これが、私たちが感じる「表示の遅延」の正体の一つです。
2. JavaScript（動的な仕掛け）という「突然のプラン変更」
JavaScriptは、ボタンを押すと動いたり、データを書き換えたりする「仕掛け」です。
ブラウザが `
`defer` を使えば、職人さんはHTMLの組み立てを優先し、最後にまとめてスクリプトを実行してくれるようになります。これだけで、ユーザーが感じる「表示の速さ」は劇的に変わります。
---
まとめ：ブラウザと仲良く付き合うために
ブラウザのレンダリングブロックは、決して「意地悪」でやっているわけではありません。「中途半端な状態で画面を見せて、ユーザーを混乱させたくない」という、ブラウザなりの親切心から来るものなんです。
初学者のうちは、以下のことだけ意識してみてください。
1. CSSはできるだけ早く読み込めるようにする（でも、あまりに巨大なファイルは分割を検討する）。
2. JavaScriptはなるべく `defer` をつけて、HTMLの組み立てを邪魔させない。
これだけで、あなたの作るWebサイトは、驚くほど軽快で心地よいものになります。ブラウザの職人さんと協力して、最高のページを届けていきましょう！
もし途中でつまずいても大丈夫。ブラウザの仕組みなんて、ベテランのエンジニアでも日々悩みながら向き合っているものです。少しずつ、仕組みを味方につけていきましょうね！
コメント