Is it bad to use two CDNs for a Javascript library?

Question

A client's website was depending on the jquerytools.org CDN, which is currently not working and therefore his site is broken (disregarding graceful Javascript degradation). He could host the relevant files locally, but then he does not get the advantages of a CDN. How bad is it to reference ostensibly the same Javascript file on two independent CDNs in the interest of redundancy?

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="http://jquerytools.flowplayer.netdna-cdn.com/1.2.6/all/jquery.tools.min.js"></script>

Answer 1

You should check if the first CDN actually delivered jQuery before you load the second script:

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script type="text/javascript">
if (typeof jQuery.tools === 'undefined') {
    document.write('<script src="http://jquerytools.flowplayer.netdna-cdn.com/1.2.6/all/jquery.tools.min.js"><\/script>');
}
</script>

Answer 2

You could do this quite easily and safely using the method from http://html5boilerplate.com:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>

Which basically tests for the jQuery object and if it doesn't exist, tries to include it from an alternate source. Just change the URLs and object test to be your alternate CDNs and test for the jQuery tools library.

This answer: Testing if jQueryTools has loaded should help you test for jQuery tools, but to save you a click, the following (untested) should do it:

<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>window.jQuery.fn.tabs || document.write('<script src="http://jquerytools.flowplayer.netdna-cdn.com/1.2.6/all/jquery.tools.min.js"><\/script>')</script>

Answer 3

I would not load both of them. We do the following for jquery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="/static/js/jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>

To only load the local version, if the CDN version failed to load. I'm not sure if this is best practice, but it works for us. Of course, you would need to find a way to identify if the jquery-tools has been loaded. If it is initialized later on, (DomReady) or something like that, this will not work.