ブラウザの「読み込みの渋滞」を解消する：`defer` と `async` の正しい使い分け

フロントエンド開発の現場で、「なぜかページの表示がもたつく」「DOMContentLoadedがなかなか発火しない」という壁にぶつかったことはないだろうか。

原因の多くは、`

こんにちは、パフォーマンスの世界へ

---

なぜ `defer` が「正義」なのか？

`defer`を使う最大のメリットは、「DOMツリーが完成していることが保証されている」という安心感にある。

以前は「scriptタグは``の直前に書け」と教わったかもしれない。あれはブラウザのパースを止めないための苦肉の策だった。しかし、今の時代、`defer`を使えば``内に配置できる。つまり、ブラウザはHTMLを読み込んだ瞬間に「あ、こいつは後で実行すればいいんだな」と理解し、先回りしてネットワーク帯域を確保できる。

ブラウザにとっての「先読み」は命綱だ。 `defer`はブラウザに「後回しにしていいよ」という明確なヒントを与えることで、クリティカルレンダリングパスを最短化してくれる。

現場のエンジニアへ送るアドバイス

最後に、現場でのトラブルシューティングを一つ。

もし「`defer`を使っているのに、JSが動かない！」という事態に遭遇したら、それは「DOM要素がまだ存在しないタイミングでスクリプトが動いている」のではなく、「`document.write`を使っている」可能性が高い。`defer`や`async`が付与されたスクリプト内での`document.write`はブラウザによって無視される仕様だ。

もしレガシーなコードを触っているなら、まずは`document.write`を駆逐することから始めてほしい。それが、モダンなブラウザのパフォーマンスを引き出すための最初の一歩だ。

技術は常にアップデートされている。仕様書をただ読むのではなく、ブラウザという「巨大なエンジン」がどうやってHTMLを解釈し、どうやってレンダリングの重圧を回避しようとしているのか。その「呼吸」を感じながらコードを書けば、あなたの書くフロントエンドは一段と洗練されたものになるはずだ。