JavaScriptコードを外部ファイルとして作成し、それらのファイルをHTMLに読み込む際、
外部ファイルに記述されたコードはいつどのようなタイミングで実行されるのか？
参照先 http://analogic.jp/external-js-execute-timing/
|
1
2
3
4
5
6
7
8
9
|
<html> <head> </head> <body> ... </body></html> |
|
1
|
console.log('first script'); |
|
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> <p>テストです。</p> <script> console.log('inline script'); </script> </body></html> |
上記の例では、以下の順で記述しています。
- 外部JSファイル（非常に重いファイル）
- pタグ
- インラインスクリプト
- 外部JSファイル（軽いファイル）
⇒スクリプトは first.js → インラインスクリプト → second.js の順で実行されていることが分かります。
外部JSファイルであれ、インラインスクリプトであれ、スクリプト以外のマークアップであれHTML上での出現順序通りにコードが実行される、ということが言えそうですね。これは言い方を変えると、スクリプトのロード・解析/実行が完了するまで、以降のHTMLマークアップの解析は「一時停止状態」になるということです。
【まとめ】
ここまでの検証結果を踏まえると、HTMLマークアップの中に複数の<script>タグ（外部ファイル参照やインラインスクリプト）や、スクリプト以外のマークアップが存在する場合でも、HTML上での出現順序通りに順次処理される、と言えるでしょう。（※<script>タグが<head>タグ内にあっても<body>タグ内にあっても結果は同じ）
また、特定のスクリプトのロードに時間がかかってしまった場合、そのスクリプトのロード・実行が完了するまでは、次のスクリプトは実行されないということが分かりました。
