上の画像はChrome Developer toolのNetworkパネルで確認出来たものなのですが、
例えば、以下のconsole.log(1)は上の画像のContent Downloadの青いバーの始まり付近で実行されるのでしょうか？それとも、青いバーが最後まで行った後に実行されるのでしょうか？

console.log(1)

// ここに１万行くらいの長いコードが仮にあるとする

なぜ、このような質問をしたかといいますと、複数のjsファイルをhtmlファイルで読み込んでおり、Networkパネルではそれらのjsファイルが期待している通りの順番に読み込まれていることが確認出来るのですが、それぞれのjsファイルの冒頭にデバッグ目的で挿入しているconsole.logの出力をchrome developer toolのconsoleで見ると、期待していない順番で実行されていることが確認出来たからです。

それによって、以下のような構成の場合、時折、jQueryの$がundefinedというエラーが発生してしまっています。
※以下のようにjsから別jsを読み込むのは仕様なので仕方ありません。。。

サンプルHTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="./index1.js></script>
		<script src="https://code.jquery.com/jquery-3.2.1.min.js" defer></script>
	</head>
	<body>
		
	</body>
</html>

サンプルJavaScrip1(index1.js)

var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = "./index2.js";
head.appendChild(scriptForLoading);

サンプルJavaScrip2(index2.js)

$(function(){
	console.log('hello world');
}

x_x

2018/01/09 05:50

サンプルを動くものにできるでしょうか？現状では引用符が足りなかったりscriptForLoadingが突然出てきたりします。

行動規範の内容に同意します

回答2件

スクリプトを最後まで読み込んで、全体をコンパイルして、コンパイルが文法エラーなく成功して、初めて実行が始まります。全体と言っても<script>タグ単位ですが。

投稿2018/01/07 05:19

otn

総合スコア84555

こちらが参考になるかと思いますが如何でしょう。
https://qiita.com/phanect/items/82c85ea4b8f9c373d684

例えば以下のようにするなど。

html
1<!-- 修正前 -->
2<script src="./index1.js></script>
3<script src="https://code.jquery.com/jquery-3.2.1.min.js" defer></script>
4
5<!-- 修正後 deferを除去しjqueryを先に読込-->
6<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
7<script src="./index1.js"></script>