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.19
605
JavaScript

【JavaScript】スプレット構文(…)を使い、配列・オブジェクトを追加・連結(マージ)する方法

2022.12.04
533
JavaScript

disabledを使って任意のinput要素を入力無効にする方法【条件判定で解除する】

更新日:2022.09.09
3133
JavaScript

【JavaScript】親要素から子要素を取得する方法

2023.01.30
1394