JavaScript - async属性でスクリプトを非同期で読み込む

JavaScriptの外部ファイルを非同期で読み込みたい場合は、 async属性を使用します。

async属性は次のように記述します。


<script scr="test.js" async></script>

このように記述すると、 src属性で指定された外部スクリプトを非同期で読み込み、 読み込みが完了すると実行されます。

async属性は実行順序が保証されない

async属性の注意点として、「実行順序が保証されない」点があります。

例えば、次のように指定したとします。


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

common.jsが共通で使用するファイルで、 script1.jsやscript2.jsがcommon.jsに依存しているとします。

この場合は、async属性を指定すると実行順序が保証されないため 正常に動作しない可能性があります。

ファイルに依存関係がある場合は、async属性は使わないか、 1つのファイルにまとめます。

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする