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)
参考