Will inserting the same `<script>` into the DOM twice cause a second request in any browsers?

Question

I've been working on a bit of JavaScript code that, under certain conditions, lazy-loads a couple of different libraries (Clicky Web Analytics and the Sizzle selector engine).

This script is downloaded millions of times per day, so performance optimization is a major concern. To date, I've employed a couple of flags like script_loading and script_loaded to try to ensure that I don't load either library more than once (by "load," I mean requesting the scripts after page load by inserting a <script> element into the DOM).

My question is: Rather than rely on these flags, which have gotten a little unwieldy and hard to follow in my code (think callbacks and all of the pitfalls of asynchronous code), is it cross-browser safe (i.e., back to IE 6) and not detrimental to performance to just call a simple function to insert a <script> element whenever I reach a code branch that needs one of these libraries?

The latter would still ensure that I only load either library when I need it, and would also simplify and reduce the weight of my code base, but I need to be absolutely sure that this won't result in additional, unnecessary browser requests.

My hunch is that appending a <script> element multiple times won't be harmful, as I assume browsers should recognize a duplicate src URL and rely on a local cached copy. But, you know what happens when we assume...

I'm hoping that someone is familiar enough with the behavior of various modern (and not-so-modern, such as IE 6) browsers to be able to speak to what will happen in this case.

In the meantime, I'll write a test to try to answer this first-hand. My hesitation is just that this may be difficult and cumbersome to verify with certainty in every browser that my script is expected to support.

Thanks in advance for any help and/or input!

Answer 1

Got an alternative solution.

At the point where you insert the new script element in the DOM, could you not do a quick scan of existing script elements to see if there is another one with the same src? If there is, don't insert another?

Javascript code on the same page can't run multithreaded, so you won't get any race conditions in the middle of this or anything.

Otherwise you are just relying on the caching behaviour of current browsers (and HTTP proxies).

Answer 2

The page is processed as a stream. If you load the same script multiple 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 of inserting script tags for the same script multiple times.

The way I solve this problem is to have a "test" function for every script to see if it is loaded. E.g. for sizzle this would be "function() { return !!window['Sizzle']; }". The script tag is only inserted if the test function returns false.

Answer 3

Each time you add a script to your page,even if it has the same src the browser may found it on the local cache or ask the server if the content is changed.

Using a variable to check if the script is included is a good way to reduce loading and it's very simple: for example this may works 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 the src,my solution is better because it hase the speed and simplicity of an hash array and the script src has an absolute path even if you set it with a relative path.
you may also want to init the array with the scripts normally loaded(without lazy loading)on the page init to avoid double request.