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>