ブラウザの裏側を支配せよ：asyncとdeferがレンダリングを劇的に変える理由

フロントエンドの現場で「とりあえず `

ブラウザの裏側を最適化する

チーフアーキテクトからのアドバイス

「じゃあ、全部 `defer` でいいじゃん」と思った君、その直感は正しい。実際、現代のフロントエンド開発において、ほとんどのケースで `defer` は最強の選択肢だ。

しかし、注意点もある。`defer` は `DOMContentLoaded` イベントが発火する直前に実行される。もし君が「HTMLが読み込まれた瞬間にどうしても動かしたい初期化処理」があるなら、`defer` の特性を理解した上でコードを書く必要がある。

現場の泥臭い知見:
`DOMContentLoaded` を待ち構えているスクリプトが複数ある場合、`defer` を使えば、タグの記述順通りにイベントが発火する。これが「順序の保証」のありがたみだ。`async` を使ってしまったら、解析ツールが先に動き出してメインアプリより先に初期化を完了させようとし、予期せぬエラーを吐くことになるだろう。

まとめ：ブラウザを味方につけるために

• HTMLパースを止めない: これがパフォーマンスの鉄則。
• 基本は `defer`: 順序が大事なロジックは迷わず `defer`。
• 独立したスクリプトは `async`: 順序が不要で、早く動いてほしいものは `async`。

ブラウザは君のコードを読み解こうと必死にもがいている。その手助けをしてやるのが、優れたフロントエンドエンジニアの仕事だ。この仕組みさえ理解していれば、どんなに重いDOMツリーでも、君のコード次第で滑らかにレンダリングされるようになるはずだ。

次はぜひ、`preload` や `prefetch` と組み合わせたリソースの優先度制御にも挑戦してみてほしい。また一段、レベルの高い景色が見えるはずだ。応援しているぞ！