【テクニカル・上級編】 scriptタグのdeferとasync属性 – Webブラウザの仕組み実践ガイド

ブラウザのレンダリングエンジンは、常に「いかにしてメインスレッドを止めないか」という終わりのない闘いを繰り広げています。

特にHTMLパーサーが `

現場の知見：重大なバグを回避するために

現場でよくある失敗は、「asyncを付けたスクリプトの中で、DOMの取得を試みること」です。

`async` スクリプトは、HTMLのパース中に割り込んで実行されるため、特定のDOM要素が存在しないタイミングで実行される可能性があります。これにより `null` 参照エラーが頻発し、アプリケーションがクラッシュします。

解決策:
DOM依存のロジックは、必ず `defer` を使用するか、スクリプト内で `DOMContentLoaded` イベントを待機する防衛的なコードを記述してください。

// 防衛的な実装例
document.addEventListener('DOMContentLoaded', () => {
const root = document.getElementById('app');
if (root) {
// ここで初めてDOMを操作する
}
});

---

まとめ：ブラウザを「信頼」するアーキテクチャへ

Webブラウザは非常に賢いマシンです。私たちが `