WEBシステムでDOM構築をjavascriptでコントロールしている時に、ふと浮かんだ疑問があります。
それは、scriptタグをcreateElementしてappendChildする際に、ブラウザはどのタイミングでファイルを読み込み始めるのか？という内容です。
読み込み完了をonloadイベントで取得してコールバック関数で処理をすることで、確実にデータを処理する事ができるのですが、無駄にデータを読み込まないようにもしたいために、無駄判定が発生したらscriptタグを設置しないようにすればいいのですが・・・半分効率化、半分興味本位で、読み込みタイミングの実験を行いたいと思います。
普通に読み込んで順番を確認する
まずは、各種ソースコードの一覧を掲載
<!DOCTYPE html>
<html lang="js">
<head>
<meta charset="utf-8">
<title>load-test</title>
<script src="load.js"></script>
</head>
<body>
<p>load-test</p>
</body>
</html>
img{
width:64px;
height:64px;
}
window.onload = function(){
var script = document.createElement("script");
script.src = "load-1.js";
document.body.appendChild(script);
var img = new Image();
img.src = "labo.svg";
document.body.appendChild(img);
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "link.css";
document.body.appendChild(link);
};
index.htmlをブラウザで読み込むと以下のような状態になります。
全てのデータが無事に読み込まれている事がわかります。
appendChildしないとどうなる？
上記のjavascriptファイル"load.js"を下記のように修正してみます。
window.onload = function(){
var script = document.createElement("script");
script.src = "load-1.js";
// document.body.appendChild(script);
var img = new Image();
img.src = "labo.svg";
// document.body.appendChild(img);
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "link.css";
// document.body.appendChild(link);
};
この状態でブラウザ読み込みをしてみると・・・
"labo.svg"ファイルが何故か読み込まれているのが分かります。
この結果から考えると、image関数を使ったオブジェクトはsrcを与えた瞬間に読み込みが開始するという事が分かります。
createElementした状態でsrc属性を追加しても、読み込みは開始されないので、色々なコンテンツを扱う時の事前読み込みなどで利用できますね。
