scriptタグの読み込み・実行タイミングを変更する方法【defer / async属性を使おう】
scriptタグの読み込み・実行タイミングを変更。
HTML(DOM)の読み込みを出来るだけ阻害しないようにしたい。
本記事ではこのような悩みを解決。
実装方法について解説します。
defer属性を使う
<script src="./test.js" defer></script>
defer属性をscriptタグに付与します。
defer属性を付与するとHTML（DOM）が読み込み完了した後にscriptを実行します。
scriptの読み込みはHTML（DOM）と並行で読み込まれます。
async属性を使う
<script src="./test.js" async></script>
async属性をscriptタグに付与します。
async属性は非同期でscriptを読み込みます。
defer同様、HTML（DOM）と並行で読み込まれます。
読み込みが完了し実行されるタイミングでHTMLの読み込みが一時中断され、script優先で実行されます。
上記がdeferとの大きな違いになります。
まとめ
HTMLのパース（読み込み）を出来るだけ阻害しないでscriptを読み込み・実行するdefer・async属性について紹介しました。
以上で解説を終わります。
目次