JavaScriptコードを外部ファイルとして作成し、それらのファイルをHTMLに読み込む際、外部ファイルに記述されたコードはいつどのようなタイミングで実行されるのか?

JavaScriptコードを外部ファイルとして作成し、それらのファイルをHTMLに読み込む際、
外部ファイルに記述されたコードはいつどのようなタイミングで実行されるのか?

参照先 http://analogic.jp/external-js-execute-timing/

1
2
3
4
5
6
7
8
9
<html>
  <head>
    <script src="http://hogehoge.com/first.js"></script>
    <script src="http://localhost/second.js"></script>
  </head>
  <body>
  ...
  </body>
</html>
first.js
1
console.log('first script');
second.js
1
console.log('second script');

検証1:ネットワークからのレスポンス速度の違うJSファイルの実行タイミング
⇒second.jsの方が先にダウンロードが完了しています。にもかかわらず first.js、second.js の順で実行されているということは、second.jsはfirst.jsのロード・実行が完了するまで「待っている」ということになりますね。

検証2:ファイルサイズの違うJSファイルの実行タイミング
⇒検証1の結果同様、こちらの場合も first.js、second.js の順で実行されていることが分かります。

検証3:外部JSファイル、インラインスクリプト、スクリプト以外のタグの混在時の実行順序

1
2
3
4
5
6
7
8
9
10
11
<html>
  <head></head>
  <body>
    <script src="http://hogehoge.com/first.js"></script>
    <p>テストです。</p>
    <script>
    console.log('inline script');
    </script>
    <script src="http://hogehoge.com/second.js"></script>
  </body>
</html>

上記の例では、以下の順で記述しています。

  • 外部JSファイル(非常に重いファイル)
  • pタグ
  • インラインスクリプト
  • 外部JSファイル(軽いファイル)

スクリプトは first.js → インラインスクリプト → second.js の順で実行されていることが分かります。
外部JSファイルであれ、インラインスクリプトであれ、スクリプト以外のマークアップであれHTML上での出現順序通りにコードが実行される、ということが言えそうですね。これは言い方を変えると、スクリプトのロード・解析/実行が完了するまで、以降のHTMLマークアップの解析は「一時停止状態」になるということです。

【まとめ】

ここまでの検証結果を踏まえると、HTMLマークアップの中に複数の<script>タグ(外部ファイル参照やインラインスクリプト)や、スクリプト以外のマークアップが存在する場合でも、HTML上での出現順序通りに順次処理される、と言えるでしょう。※<script>タグが<head>タグ内にあっても<body>タグ内にあっても結果は同じ)

また、特定のスクリプトのロードに時間がかかってしまった場合、そのスクリプトのロード・実行が完了するまでは、次のスクリプトは実行されないということが分かりました。

 

About

You may also like...

Your email will not be published. Name and Email fields are required