こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。
Webサイトを作っていて、「あれ？なんだか画面が表示されるまでに変なタイムラグがあるな……」「JavaScriptを読み込ませたら、ページの表示がなんだかモッサリした気がする……」なんて悩んだ経験はありませんか？
大丈夫ですよ、その感覚はめちゃくちゃ鋭いです！実はそれ、Webブラウザの頭の中を覗くことですべて綺麗に解決できちゃうんです。今回は、ブラウザがHTMLを読み込んで画面を描き上げるまでの「裏側のドラマ」と、そこに忍び寄る「スクリプトによるパースブロック」の正体に迫っていきましょう！
—
1. ブラウザは「料理人」、HTMLは「レシピ」
まず、Webブラウザが画面を表示する仕組みを、レストランの厨房に例えてみましょう。
ブラウザという名の優秀な料理人は、サーバーから届いたHTMLという名の「レシピ」を上から順番に読み込んでいきます。
この「レシピを一行ずつ読み解いて、頭の中で料理の組み立て図（DOMツリー）を作る作業」を、専門用語でHTMLパース（解析）と呼びます。
料理人は超特急でレシピを読み進めます。「あ、ここに『見出し』があるな」「ここに『画像』を置くんだな」と、テキパキと頭の中で料理の段取りをつけていくわけです。
ところが、この平和な厨房に、ある「厄介な存在」が突如として現れます。それが、HTMLの中に書かれた `` が置いてあったとします。
ここで、ブラウザ（料理人）はパタッと手を止めてしまうんです。これを技術用語で「パースブロック（解析の停止）」と呼びます。
なぜ、料理人は手を止めてしまうのでしょうか？理由は単純で、「めちゃくちゃ危険だから」です。
JavaScriptには、今まさに料理人が作っている最中のレシピ（HTML）の中身を、書き換えたり、削除したり、全く別のものに変えてしまうという「超能力」があります。
もし料理人がレシピの続きを読み進めている裏で、JavaScriptがそのレシピをビリビリに破り捨てたら大混乱ですよね？
だからブラウザは、
1. 「おい、ちょっと待て！一度HTMLを読むのをストップ！」
2. 「サーバーからJavaScriptのファイルを急いでダウンロードして、実行し終わるまで絶対に動かないぞ！」
という安全第一の判断を下します。この瞬間、ユーザーの画面には何も表示されず、ただ白紙の画面がポツンと取り残されることになるのです。これが、JavaScriptが原因でページの表示が遅くなるメカニズムの正体です。
---
3. 救世主現る！ `defer` と `async` のスマートな立ち回り
「じゃあ、JavaScriptを使うと必ず画面の表示が遅くなっちゃうの？困るよ！」と思いますよね。安心してください。現代のブラウザには、このパースブロックを華麗に回避する「2人のスーパーヒーロー」が用意されています。
それが、`
こんにちは、ブラウザの仕組みの世界へようこそ！
このテキストが表示される頃には、スクリプトのせいで画面が固まる心配はありません。