Written by Kasumi

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属性について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptを使って別ページにリダイレクトさせる方法

2022.12.13
354
JavaScript

【JavaScript】受け取ったデータが文字列 or 数値どちらなのか判定する方法【typeof演算子を使おう】

2022.11.29
417
JavaScript

JavaScriptでブラウザにデータを保存する方法【Local Storageを使おう】

2022.11.19
692
JavaScript

【JavaScript】selectボックスで選択したoptionによってクラスを追加・削除する方法

2022.10.14
675