JavaScript ファイルの読み込みと実行のタイミングを調べる(async, defer)

実験

(1) 実験に使うHTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
  ...
  <link rel="preload" href="./script-head-preload.js" as="script">
  <link rel="preload" href="./script-bottom-preload.js" as="script">
  <link rel="preload" href="./defer-bottom2-preload.js" as="script">
  <link rel="preload" href="./async-bottom2-preload.js" as="script">
  ...
  <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="./defer-bottom2-preload.js" defer></script>
  <script src="./async-bottom.js" async></script>
  <script src="./async-bottom2-preload.js" async></script>
  <script src="./defer-bottom3.js" defer></script>
</body>
</html>

(2) 実験手順

実験の結果

(1) JavaScriptファイルが実行された順番

実行の順番(async以外)
順番 スクリプト Priority 説明
1 script-head.js High 読み込まれたらすぐに実行される。パースをブロックして実行される。
2 script-head-preload.js High preload していても関係なく、記述した順番に実行されるようだ。
3 script-bottom.js High
4 defer-head.js Low DOMContentLoadedイベントが発生する直前のタイミングのはず。なので、HTMLパースは完了しているはず。
5 defer-head2.js Low
6 defer-head3.js Low
7 defer-bottom.js Low
8 defer-bottom2.js Low
9 defer-bottom2-preload.js High preload しているので早いタイミングで読み込まれるが、記述した順番に実行される。
10 defer-bottom3.js Low
実行の順番(asyncのみ)
順番 スクリプト Priority 説明
? async-bottom2-preload.js High
? async-head.js Low
? async-bottom.js Low

(2) Chrome の [Network]パネル

Chrome DevTools [Network]パネル

(3) Chrome の [Performance]パネル

Chrome DevTools [Performance]パネル

結論

仕様メモ

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

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

参考