Will the same `<script>` in the DOM enter the second request twice in any browsers?

Question

I worked on a small amount of JavaScript code, which under certain conditions lazily loads several different libraries ( Clicky Web Analytics and Sizzle .

This script is downloaded millions of times a day, so optimizing performance is a serious problem. To date, I have used a couple of flags, such as script_loading and script_loaded , to make sure that I do not load one library more than once ("load", I mean requesting scripts after loading the page by inserting a <script> into the DOM).

My question is: instead of relying on these flags, which have become a bit cumbersome and inconvenient in my code (I think callbacks and all the pitfalls of asynchronous code), this is safe for cross-browser (i.e. back to IE 6) , and also not be detrimental to performance, just to call a simple function to insert a <script> element whenever I get a code branch that needs one of these libraries?

The latter will still guarantee that I will load only one library when I need it, and also simplify and reduce the weight of my code base, but I must be absolutely sure that this will not lead to an additional, unnecessary browser request.

My guess is that adding the <script> element several times will not be harmful, as I believe that browsers should recognize the duplicate URL src and rely on a local cached copy. But you know what happens when we assume ...

I hope that someone is familiar enough with the behavior of various modern (and not very modern, such as IE 6) browsers to be able to talk about what will happen in this case.

In the meantime, I will write a test to try to answer this question first hand. My doubt is that it can be difficult and cumbersome to check with confidence in every browser that my script is expected to support.

Thank you in advance for your help and / or input!

Answer 1

An alternative solution is received.

The moment you insert a new script element into the DOM, could you quickly look at existing script elements to see if there is another one with the same src? If there is, do not insert another?

Javascript code on the same page cannot work multithreaded, so you will not get any race conditions in the middle of this or anything else.

Otherwise, you simply rely on the caching behavior of current browsers (and HTTP proxies).

Answer 2

The page is treated as a stream. If you load the same script several times, it will be run every time it is included. Obviously, due to the browser cache, it will be requested from the server only once.

I would stay away from this approach to insert script tags for the same script several times.

As I solve this problem, I need to have a “test” function for each script to see if it is loaded. For instance. for sizzle it will be "function () {return !! window ['Sizzle'];}". The script tag is only inserted if the validation function returns false.

Answer 3

Each time you add a script to your page, even if it has the same src, the browser may find it in the local cache or ask the server if the contents will be changed.

Using a variable to check if a script is included is a good way to reduce load, and it's very simple: for example, this might work for you:

 var LOADED_JS=Object(); function js_isIncluded(name){//returns true if the js is already loaded return LOADED_JS[name]!==undefined; } function include_js(name){ if(!js_isIncluded(name)){ YOUR_LAZY_LOADING_FUNCTION(name); LOADED_JS[name]=true; } } 

you can also get all script elements and check src, my solution is better because it supports the speed and simplicity of the hash array, and src script has an absolute path, even if you set it with a relative path.
you may also want to initialize an array with normally loaded scripts (without lazy loading) on ​​the init page to avoid double request.