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) 実験手順

実験の結果

(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のみ)
順番 スクリプト 説明
1 async-head.js Chrome で実験した限りでは、async-bottom.js より後に実行されることはなかった。
2 async-bottom.js

(2) Chrome の [Network]パネル

Chrome [Network]パネル

結論

仕様メモ

scriptタグによる読み込みと実行タイミング

scriptタグによる読み込みと実行タイミング
(参照元:HTML Standard

参考