defer属性とasync属性の使い分け

「defer属性」

外部のJSライブラリ(jQueryとか)の機能を使ったJSファイルやプラグイン等、スクリプト間に依存関係がある場合にはこちらを指定する。

DOMツリー構築完了後、常にscript1 → script2の順に実行される

<script src="script1.js" defer></script>
<script src="script2.js" defer></script>

「async属性」

ダウンロードが完了した順に実行される

スクリプトが<script>要素の順に実行されることが保証されない。

スクリプトのダウンロードが終わると直ちにコンパイル&実行されるため、スクリプト間の依存関係が無い場合はこちらの方が高速。

<script src="script1.js" async></script>
<script src="script2.js" async></script>