JavaScript ファイルの読み込みと実行のタイミングを調べる(async, defer)
実験
(1) 実験に使うHTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
...
<script src="./script-head.js"></script>
<script src="./defer-head.js" defer></script>
<script src="./defer-head2.js" defer></script>
<script src="./async-head.js" async></script>
<script src="./defer-head3.js" defer></script>
...
</head>
<body>
...
<script src="./script-bottom.js"></script>
<script src="./defer-bottom.js" defer></script>
<script src="./defer-bottom2.js" defer></script>
<script src="./async-bottom.js" async></script>
<script src="./defer-bottom3.js" defer></script>
</body>
</html>
(2) 実験手順
- ブラウザのコンソールを開いて、このページをリロードしてください（キャッシュを削除してから）。
- それぞれの JavaScriptファイルには、
console.log() で自分自身のファイル名を出力するコードが記述されているので、読み込まれた順番にファイル名が出力されます。
実験の結果
(1) JavaScriptファイルが実行された順番
実行の順番(async以外)
| 順番 |
スクリプト |
説明 |
| 1 |
script-head.js |
読み込まれたらすぐに実行される。パースをブロックして実行される。 |
| 2 |
script-bottom.js |
|
| 3 |
defer-head.js |
この時点でパースは完了しているはず。 |
| 4 |
defer-head2.js |
|
| 5 |
defer-bottom.js |
|
| 6 |
defer-bottom2.js |
|
| 7 |
defer-bottom3.js |
|
- 必ず上記の順番で実行される。
async-*.js ファイルの実行タイミングは、その時によって2番目だったり5番目だったりして不定であった（非同期実行であるため）。- ただ、
async-head.js が async-bottom.js より先に実行された（保証されている？）。
実行の順番(asyncのみ)
| 順番 |
スクリプト |
説明 |
| 1 |
async-head.js |
Chrome で実験した限りでは、async-bottom.js より後に実行されることはなかった。 |
| 2 |
async-bottom.js |
|
(2) Chrome の [Network]パネル
Chrome [Network]パネル
結論
- <head>内のJavaScriptファイルが先に読み込まれる。
- 基本的には上から順番に読み込まれる。
defer は、普通の JavaScriptファイルの後で実行される。defer は記述した順番で実行される。async はいつ実行されるか分からない。
仕様メモ
scriptタグによる読み込みと実行タイミング
scriptタグによる読み込みと実行タイミング
（参照元：HTML Standard）
参考