👻
htmlにおけるscriptのタグの実行順序について、あいまいだったのでまとめた。
HTML内で複数のscriptタグを使用した場合の読み込み順序について
同期スクリプト（デフォルト）の場合:
スクリプトは記述された順番に厳密に実行されます
ブラウザはスクリプトのダウンロードと実行を順番に処理し、完了するまで次のスクリプトやHTMLのパースをブロックします
async属性付きスクリプトの場合:
スクリプトは非同期でダウンロードされ、ダウンロードが完了した時点で即時実行されます
実行順序は保証されません（ダウンロード完了順に実行される）
HTMLパースをブロックしません
defer属性付きスクリプトの場合:
スクリプトは非同期でダウンロードされますが、DOMの構築が完了した後に記述順に実行されます
HTMLパースをブロックしません
実行順序は保証されます
具体例
<!-- 順序保証される（同期） -->
<script src="script1.js"></script>
<script src="script2.js"></script> <!-- script1.jsの後に実行 -->
<!-- 順序保証されない（async） -->
<script async src="script3.js"></script>
<script async src="script4.js"></script> <!-- script3.jsより先に実行される可能性あり -->
<!-- 順序保証される（defer） -->
<script defer src="script5.js"></script>
<script defer src="script6.js"></script> <!-- script5.jsの後に実行 -->
推奨する使い方
スクリプト間の依存関係がある場合 → defer または通常の記述（同期）
スクリプトが独立していて順序が重要でない場合 → async
DOM操作が必要なスクリプト → defer またはDOMContentLoadedイベント内で実行
特にモダンなウェブ開発では、defer属性を使用するのが一般的です。これによりパフォーマンスを損なわずに実行順序を保証できます。
注意点
を参照したところ、
FIREFOXは、仕様の通りに動作しない場合もあるので、気をつけましょうとのことでした。
8年前の記事なので、何とも言えませんが。
Discussion