async属性で読むと「DOMContentLoaded」イベントが発生しない理由
はじめに
async で JavaScript を読むと DOMContentLoaded イベントが発生しません。 async 属性で読み込みつつもイベントを発生させる方法を紹介します。
async 属性とは
通常、ブラウザは読み込みの途中で <script> タグがあるとそのスクリプトを実行し終わるまで一時的にレンダリングを中断します。JavaScript の実行タイミングを保証するためです。同期処理とも呼ばれます。
<script src="javascript.js"></script>
しかし、src 属性を持つ <script> タグに async 属性を付与することにより、レンダリングが中断されなくなります。JavaScript の読込・実行とページのレンダリングが並行して行われるようになり、実行タイミングが保証されなくなります。非同期処理と呼ばれます。
<script src="javascript.js" async></script>
非同期になることにより、レンダリングが中断されずにページ表示の高速化が期待できるため、Google などが推奨しています。PageSpeed Insights のスコアも上がります。
Eliminate render-blocking resources - web.dev
https://web.dev/render-blocking-resources/