アップデートの際に表示が崩れてしまいました。
現段階で未修正です。
申し訳ございませんがご了承ください。
HTMLにて、JavaScriptのソース読み込みを行う際、どのタイミングでロードさせるかという指定ができる。(HTML5以降)
リファレンスの「Tips and Notes」を見ると、scriptに、defer,asyncといった属性が付与できることが記載されている。
https://www.w3schools.com/tags/tag_script.asp
どのような違いがあるかについては、下記の図やサイトが参考になりる。
https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async
https://reference.hyper-text.org/html5/element/script/
コードを少し書く。
下記は、jqueryライブラリを読み込み、1.js,2.jsを読み込むだけの例。
全ソース
テストケース1
deferをつけずに読み込む
index.php
js/1.js
$(function() {
console.log("load 1.js");
});
js/2.js
$(function() {
console.log("load 2.js");
});
chromeのコンソール
chromeのネットワーク
テストケース2
ちょっと変えてみたコード(jqueryの読み込みをdeferにしてみる)
chromeのコンソール
chromeのネットワーク
※deferをつけているため、リロードしてみると読み込み順番は少し変わる。
テストケース3
ちょっと変えてみたコード(srcがあるjsファイルの読み込みをdeferにしてみる)
chromeのコンソール
chromeのネットワーク
この
はどうすればよいか。
直接htmlに書かずに、外部ファイルにしてあげることで解消するのがベストと思われる。
DOMContentLoadedのイベント発火後に実行するようにすればよいかと思ったが、1.js,2.jsに定義されている関数を使用したい場合は、未定義エラーになってしまうため実現できない。(おそらく,HTMLパース時に関数の解決もされるため）
なぜdeferを指定するのか？
htmlパース時(読み込み)に重いjsがある場合、ビューを表示する際に大きく時間がかかり、ストレスを感じることがあるため、
とりあえず表示してからロードみたいな感じに使うときに必要。