こんにちは！フロントエンド・アーキテクトの私です。
Webサイトを作っていて、「あれ、なんか画面が表示されるのが遅いな……」「JavaScriptを入れた途端に、ページの読み込みがカクつくようになったぞ」なんて悩んだ経験はありませんか？
大丈夫ですよ、その悩み、Webの仕組みを学び始めた誰もが通る「最初の大きな壁」なんです。
今日は、私たちが普段なにげなく書いているHTMLやJavaScriptが、ブラウザという「職人」の手によってどう料理されているのか、その裏側のドラマを覗いてみましょう。ここが分かると、あなたの書くコードの動きがまるで透視できるようになりますよ！
—
ブラウザは「職人」の作業場。HTMLは上から順に読むのがルール
まず、Webブラウザを「超真面目な職人さん」に例えてみましょう。
あなたが書いたHTMLファイルがブラウザに届くと、職人さんはそれを上から1行ずつ、休みなく読み解いていきます。
この「HTMLを上から順に読んで、意味を理解していく作業」を、専門用語でHTMLパースと呼びます。
職人さんは、HTMLのタグを見つけるたびに、頭の中で「ここは見出しだな」「ここは画像だな」とパーツを組み立てていきます。この組み立てられたパーツの設計図こそが、あの有名なDOM（Document Object Model）ツリーです。家を建でるなら、柱や壁を一本ずつ立てていくようなものですね。
順調に家（DOMツリー）の骨組みを作っていた職人さんですが、ここである「大事件」が起きます。
—
突然の来客！``タグがDOM構築を完全ストップさせる理由
HTMLを上から読んでいた職人さんの視界に、突然こんなタグが飛び込んできました。
おっと、JavaScriptの登場です。ここで、職人さんはピタッと作業を止めざるを得なくなります。これを「スクリプトのブロッキング（ブロック）」と呼びます。
なぜ、職人さんは手を止めてしまうのでしょうか？
理由はシンプルです。「JavaScriptは、今作っている途中のDOM（家の中の家具や壁）を、勝手に書き換えたり消したりするかもしれないから」です。
例えば、JavaScriptの中で `document.getElementById('my-button')` なんて書いてあったとします。もし職人さんがHTMLの続きを読み進める前に、このJavaScriptを実行しちゃったらどうなるでしょう？ 「えっ、そんなボタンまだ作ってないよ！」とパニックになってエラーを起こしてしまいますよね。
だからこそ、ブラウザの職人さんはこう判断します。
- 「安全のために、HTMLの読み込み（DOM構築）はいったん中断しよう」
- 「ネットの向こうからJavaScriptのファイルをダウンロードして……」
- 「そのコードを完全に実行し終えるまで、次のHTMLには絶対に進まないぞ！」
結果として、重たいJavaScriptファイルがあると、画面の表示が何秒もフリーズしたように止まってしまうのです。ユーザーからすると「このサイト、重いな……」と感じる瞬間ですね。
---
救世主登場！ `async` と `defer` で「並行作業」を覚えよう
「じゃあ、重たいJavaScriptがあるときは、ずっと画面が止まるのを我慢するしかないの？」
いいえ、そんなことはありません！近代のブラウザと私たちのために、HTML5では素晴らしい2つの魔法の属性が用意されました。それが `async`（エイシンク） と `defer`（ディファー） です。
先ほどの「職人さん」の例えに戻って、それぞれの違いを見てみましょう。
1. `async` 属性：届き次第、今すぐ割って入る「マイペース型」
`async` をつけると、職人さんはHTMLを読み進める作業（DOM構築）を止めません。HTMLを読みながら、裏側でコソコソとJavaScriptのダウンロードを始めます。
そして、ダウンロードが終わった瞬間……！
「作業中すませーん！ちょっといまからこのJS実行しまーす！」 と、職人さんの作業を強制中断してJavaScriptを実行しちゃいます。
- 向いているもの： アクセス解析ツール（Google Analyticsなど）や広告タグなど、他のHTML要素に依存しない独立したスクリプト。
- 注意点： どの順番で実行されるかがバラバラなので、他のスクリプトと連携する処理には向きません。
2. `defer` 属性：最後にまとめてこなす「お行儀の良い優等生」（おすすめ！）
私が実務で一番よく使うのがこの `defer` です。
`defer` をつけると、職人さんはHTMLの読み込み（DOM構築）を一切止めずに最後までやり通します。裏でJavaScriptのダウンロードを進めつつ、HTMLの解析を休まず最後まで終わらせるんです。
そして、家（DOMツリー）の骨組みがすべて完成した最後に、「お待たせしました！」とJavaScriptを実行してくれます。
- 向いているもの： ほとんどの一般的なWebサイトのメインJavaScript。
- メリット： DOMが確実に全部揃っている状態でスクリプトが動くため、エラーが起きにくく、何より画面が表示されるまでのスピード（体感速度）が劇的に早くなります！
---
今日のまとめと、実務で使える処方箋
最後に、今日のポイントを整理しておきましょう。
1. HTMLパースとDOM構築： ブラウザは上から順にHTMLを読んで家を建てる。
2. デフォルトの `
コメント