Search jQuery

jQuery Forum

CDN failover to domain-provided js files?

in Developing jQuery Core • 3 years ago

Many of us use CDNs to load jQuery and jQueryUI+themes and we can all
agree this is a great service and a nice performance goodie.
I wonder, has anyone written or seen anything about a fast and robust
CDN failover strategy?
Consider these scenarios, for example:
* You're developing, but all your pages deep-link into a .JS-framework
CDN, but you don't currently have a live internet connection.
* Your end-user can access your website but, for any of a number of
plausible reasons, ajax.googleapis.com isn't responding so your end-
user isn't well-served.
Any ideas? Can you think of a fast and robust wrapper that could, as
required, fetch jQuery framework files from, say, the virtual /js
folder -- an arbitrary alternate location -- if the CDN isn't
reachable?
**--** Steve

Replies(12)

jeresig

Re: CDN failover to domain-provided js files?

3 years ago

You could probably do something like this:
<script src="<a href="http://somecdn.com/jquery.js">somecdn.com/jquery.js</a>"></script>
<script>
if ( typeof jQuery === "undefined" ) {
document.write("<script src='local/jquery.js'></script>");
}
</script>
It's not shiny, but it would work - and avoid loading two copies of jQuery.
<br clear="all">
--John

geoffreyk

Re: CDN failover to domain-provided js files?

3 years ago

<p class=MsoNormal><a
href="http://weblogs.asp.net/scottgu/archive/2009/09/15/announcing-the-microsoft-ajax-cdn.aspx">http://weblogs.asp.net/scottgu/archive/2009/09/15/announcing-the-microsoft-ajax-cdn.aspx</a><span
style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'><o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I couldn’t find any posts about this on the discussion
list. Not sure if it is really public or just what.<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Geoff<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Bing Travel/ formally Farecast<o:p></o:p></span>

<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-dev@googlegroups.com [mailto:jquery-dev@googlegroups.com] <b>On Behalf
Of </b>John Resig
<b>Sent:</b> Tuesday, October 06, 2009 8:02 PM
<b>To:</b> jquery-dev@googlegroups.com
<b>Subject:</b> [jquery-dev] Re: CDN failover to domain-provided js files?<o:p></o:p></span>

</div>
<p class=MsoNormal><o:p> </o:p>

<p class=MsoNormal style='margin-bottom:12.0pt'>You could probably do something
like this:
<script src="<a href="http://somecdn.com/jquery.js">somecdn.com/jquery.js</a>"></script>
<script>
if ( typeof jQuery === "undefined" ) {
document.write("<script src='local/jquery.js'></script>");
}
</script>
It's not shiny, but it would work - and avoid loading two copies of jQuery.
<br clear=all>
--John
<o:p></o:p>

<div>
<p class=MsoNormal>On Tue, Oct 6, 2009 at 5:53 PM, Steven Black <<a
href="mailto:steveb@stevenblack.com">steveb@stevenblack.com</a>> wrote:<o:p></o:p>

<p class=MsoNormal style='margin-bottom:12.0pt'>
Many of us use CDNs to load jQuery and jQueryUI+themes and we can all
agree this is a great service and a nice performance goodie.
I wonder, has anyone written or seen anything about a fast and robust
CDN failover strategy?
Consider these scenarios, for example:
* You're developing, but all your pages deep-link into a .JS-framework
CDN, but you don't currently have a live internet connection.
* Your end-user can access your website but, for any of a number of
plausible reasons, <a href="http://ajax.googleapis.com" target="_blank">ajax.googleapis.com</a>
isn't responding so your end-
user isn't well-served.
Any ideas? Can you think of a fast and robust wrapper that could, as
required, fetch jQuery framework files from, say, the virtual /js
folder -- an arbitrary alternate location -- if the CDN isn't
reachable?
**--** Steve
<o:p></o:p>

</div>
<p class=MsoNormal style='margin-bottom:12.0pt'>

phil.dokas

Re: CDN failover to domain-provided js files?

3 years ago

On Oct 6, 2009, at 11:02 PM, John Resig

dave.meth..

Re: CDN failover to domain-provided js files?

3 years ago

> I took this great idea and went ahead implementing it on a few sites I
> maintain using different syntax.
It's more than a syntax change; it's entirely different semantics.
Your version fetches a copy of jQuery asynchronously. If there is
a .ready() handler below that block of code, jQuery may not be loaded
by the time it is reached and you'll get errors. By using
document.write and a script tag, you can be guaranteed that the
browser won't proceed to run any code below it until it either loads
the script or gets an error back from the request (like a 404 or a
timeout).
I'd think the timeout situation is the most likely outcome when
Google's CDN is down, which means the user will see a blank screen for
30 to 60 seconds before it even reaches the document.write anyway. So
it seems like you'd need to load the Google CDN version asynchronously
to prevent that. But that raises the question of what to show the user
while it's trying to find a reachable version of jQuery...

Steven Bl..

Re: CDN failover to domain-provided js files?

3 years ago

First of all, thanks @jresig because that's just way too elegant. I
was anticipating something far more complex.
A couple of questions:
If http://cdn/jQuery.js fails, we want the local-domain jQuery.js to
load next, BEFORE the any other subsequent script which is likely a $
(function(){}) or a call for plugin, both of which have a jQuery
predicate. So I don't sense that Phil's ...('head')[0].appendChild
(script) would work reliably. Am I wrong about that? Does this
really work as you expect, Phil? I would expect a prependChild(), no?
Second, Dave raises another crux of the matter: we need to bail to the
failover ASAP, ideally within a second or two. It's almost as if we
need the CDNs to also provide a sub-packet-sized package we could
request, wrapped inside a very short timeout to bail to the failover.
**--** Steve

Michael G..

Re: CDN failover to domain-provided js files?

3 years ago

prependChild or appendChild wouldn't make any difference; they're both asynchronous.
Regarding that sub-packet-sized package with a fast timeout, how would you implement that short of recompiling the browser? :-)
-Mike

Steven Bl..

Re: CDN failover to domain-provided js files?

3 years ago

I just tested this in a variety of ways and both John's and Phil's
methods work great and you're right: appendChild and prependChild both
work.
Cool!
**--** Steve

getify

Re: CDN failover to domain-provided js files?

3 years ago

Couldn't there be a special URL for a CDN, like an "are you alive"
type url, that we load first, and then, if that works (and quickly),
we proceed to load the other files. If not, the CDN is assumed to be
"down" (or at least too slow), so we failover to loading local
versions.
This is a really rough sketch of an idea, and admittedly pretty ugly,
but I think it might work (or something close to it).
Here's a working example: http://test.getify.com/cdn-failover/
That example fakes a CDN alive check by calling a URL called
"cdnalive" which will randomly choose to:
1. return a 404
2. delay 5 seconds to respond
3. respond right away with a simple script snippet that says "var
googlecdn = true;"
If the Google CDN implemented a check url such as that, you could call
it to test if the CDN was gonna respond quickly, and then decide to
where to load scripts from accordingly.
The logic is very simple (though it looks a little bit complicated).
Basically, just set a 2 (or whatever length) second timeout, then try
to load the "alive" check url. If it loads in time, and successfully
(defining the "googlecdn" variable), proceed to load the scripts from
the CDN. Otherwise, load the scripts from the local copies.
And here's the code for those who want to see it:
<script type="text/javascript">
function initScripts() {
// jquery and jquery-ui are now loaded, go for it!
alert("jQuery and jQueryUI loaded!");
}
var aliveFailed = null, cdnFailed = false;
(function(global){
aliveFailed = setTimeout(function(){
cdnFailed = true;
addScript("jquery.min.js", // load scripts from local instead
function(){
addScript("jquery-ui.min.js",
initScripts
);
}
);
},2000); // only wait 2 seconds for CDN to respond, otherwise pull
from local copies
var head = document.getElementsByTagName("head"), // this is a
"live" DOM collection, so will update whenever HEAD is ready
script_done = {};
global.addScript = function(src,onload) {
var args = arguments;
if (head[0] == null) { // head not ready yet
setTimeout(function(){addScript.apply(null,args);},25);
}
var script = document.createElement("script");
script.type = "text/javascript";
script.onload = script.onreadystatechange = function(){
if (!(script.readyState && script.readyState!=="complete" &&
script.readyState!=="loaded") && typeof script_done[script.src] ===
"undefined") { // successful load detected
script_done[this.src] = true;
script.onload = script.onreadystatechange = null;
onload();
}
};
script.src = src;
head[0].appendChild(script);
}
})(window);
</script>
<script rel="googlecdnalive" src="[**http://ajax.googleapis.com/alive?
**]" type="text/javascript"></script>
<script type="text/javascript">
if (!cdnFailed && typeof googlecdn !== "undefined") { //
'googlecdn' defined in the cdn alive check
clearTimeout(aliveFailed);
addScript("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.min.js", // CDN is up, pull scripts from there
function(){
addScript("http://ajax.googleapis.com/ajax/libs/jqueryui/
1.7.2/jquery-ui.min.js",
initScripts
);
}
);
}
</script>

getify

Re: CDN failover to domain-provided js files?

3 years ago

I should mention that this particular approach (which is basically the
same as the previous messages with appendChild/prependChild) is
dangerous right now with jquery 1.3.2 and below.
There's a bug that's been patched for upcoming 1.3.3 which allows
jquery to *properly* detect if it's loaded to a page after dom-ready.
But in 1.3.2 and before, if you happen to add the jquery script after
dom-ready event has occurred, jquery will never recognize this, and
will just keep waiting forever to detect dom-ready. This would cause
any subsequenty logic wrapped in $(document).ready(...) blocks to
never execute, since jquery never sees the dom-ready event happen.
So, wait until 1.3.3 to attempt such things, or you will possibly have
these race conditions between jquery loading after the page's dom-
ready event.
Lastly, the above calls to my little "addScript" could be replaced
with the more robust and performant LABjs tool. :)

joern.zae..

Re: CDN failover to domain-provided js files?

3 years ago

Aren't you just introducing another point of failure?
Jörn

getify

Re: CDN failover to domain-provided js files?

3 years ago

@Jörn --
The technique of trying to provide a failover option from a CDN to a
local copy is, in my opinion, no more "introducing another point of
failure" than it is in hardware failover where you have two disks (or
disk arrays) mirrored, so in case one dies, the backup mirror can take
over.
Just because you have twice as many disks doesn't mean you doubled the
points of failure. It depends on how you configure the use of both. On
the contrary, I think perhaps you halved the points of failure, since
you are saying now that failure must be twice as bad for the user to
notice it.
--Kyle

diego.per..

Re: CDN failover to domain-provided js files?

3 years ago

Steven,
you may give this a try too, this in the spirit of reusing what we
already have available in browsers:
<script id="loader" src="somecdn.com/jquery.js"
onerror="this.src='local/jquery.js'"></script>
The "onerror" event hook should be available and usable on current
browsers and it allows you to have more complex function being called
handling the error, maybe with multiple retries.
<script id="handler">
function handler(script) {
... your stuff here ...
// get a reference if you prefer
//var script = document.getElementById('loader');
// or just used the passed argument
script.src = 'local/jquery.js';
.... your stuff here ...
}
</script>
<script id="loader" src="somecdn.com/jquery.js" onerror="handler
(this)'"></script>
Hope it can be another bullet for your weapons ;-)
Diego

Top Reply

Response title

Attachments

jQuery Forum

CDN failover to domain-provided js files?

Replies(12)

Re: CDN failover to domain-provided js files?

Re: CDN failover to domain-provided js files?

Re: CDN failover to domain-provided js files?

Re: CDN failover to domain-provided js files?

Re: CDN failover to domain-provided js files?

Re: CDN failover to domain-provided js files?

Re: CDN failover to domain-provided js files?

Re: CDN failover to domain-provided js files?

Re: CDN failover to domain-provided js files?

Re: CDN failover to domain-provided js files?

Re: CDN failover to domain-provided js files?

Re: CDN failover to domain-provided js files?

Statistics

Tags

Actions

Related Posts