javascriptでcreateElementした時の外部ファイルはどのタイミングで読み込まれるのか検証

2019/05/16

Javascript テクノロジー プログラミング

t f B! P L
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属性を追加しても、読み込みは開始されないので、色々なコンテンツを扱う時の事前読み込みなどで利用できますね。

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ