JavaScriptファイルを非同期で読み込むには、async/deferキーワードを使用します。
サンプル
例１）同期で読み込む（通常の方法）
|
1 2 3 |
<script src="./hoge1.js"></script> <script src="./hoge2.js"></script> <script src="./hoge3.js"></script> |
例２）非同期で読み込む（ファイルの読込順は保証しない）
|
1 2 3 |
<script src="./hoge1.js" async></script> <script src="./hoge2.js" async></script> <script src="./hoge3.js" async></script> |
asyncキーワードを指定します。
例３）非同期で読み込む（ファイルの読込順は保証する）
|
1 2 3 |
<script src="./hoge1.js" defer></script> <script src="./hoge2.js" defer></script> <script src="./hoge3.js" defer></script> |
deferキーワードを指定します。
| キーワード | 解説 |
|---|---|
| なし | 同期読込みする （デフォルト） |
| async | 非同期で読込みする （読み込み順は保証しない＜scriptタグを記述したとは限らない＞） |
| defer | 非同期で読込みする （読み込み順は保証する＜scriptタグを記述した順＞） |
解説
- 非同期読込みでは、jsファイル読込み時にHTMLのパースを止めることはなく処理が行われます。
- asyncを使う時は、jsファイルの読込順が重要となる場合は注意が必要です。