DotNetCurry Logo

jQuery CDN with Fallback options and Best Practices

Posted by: Suprotim Agarwal , on 6/20/2014, in Category jQuery and ASP.NET
Views: 15843
Abstract: This article discusses some benefits of CDN, some fallback options, caveats and best practices to follow.

Today I got a query from a fairly experienced developer who was facing issues with his jQuery files hosted in a 3rd party CDN. His CDN hosting provider although promising a 99.9% uptime in their Usage policy, was not quite living up to the expectations. As a result, whenever the CDN would face downtime issues, the website would 'hang' for a couple of seconds before being responsive again. Although the solution to these kind of issues is multifold, I thought of quickly writing some tips  that will help you if you are in a similar situation.

CDN stands for Content Delivery Network or Content Distribution Network (CDN). It is a system of computers networked together across the Internet with the goal of serving content like graphics, scripts, media files etc., with high availability and high performance.

Each of these interlinked computers have a copy of the content you want to serve. When your website visitor requests for some content, a CDN delivers the content from a server that's closest to the visitor. Because closer is better, this automatically reduces bandwidth requirement, reduces response time due to better caching and reduces the load on your web server. Once the content from a CDN is cached by the visitor's browser, it doesn’t have to be downloaded again for subsequent requests from that visitor. This increases the load time of your website, on the visitor’s browser.

 

In case of jQuery, the most popular CDN choices are

Google CDN - https://developers.google.com/speed/libraries/devguide?csw=1#jquery

Microsoft CDN - http://www.asp.net/ajaxlibrary/cdn.ashx#4

jQuery's own CDN - http://code.jquery.com/jquery.js

However CDN's being a third party service, may not be accessible for some reason or blocked in some countries. Yes Google is blocked in some countries and last year, Microsoft CDN had a slight issue for a couple of minutes in some parts of the US, due to a configuration change on one of their servers! Although this happens very rarely with companies like Microsoft, it is always a good practice to use a CDN, but with a fallback to a local copy of the jQuery library on your web server. Ever since checks for DOM ready state has been added from jQuery 1.4 onwards, we can easily use a CDN with a fallback option. Here's how it is done

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// Fallback to loading jQuery from a local path if the CDN is unavailable
(window.jQuery || document.write('<script src="/scripts/jquery-1.10.2.min.js"><\/script>'));
</script>

The first script uses jQuery script hosted on Google CDN in your Web application. The second script then tests to see if the jQuery object was loaded. If the jQuery object isn’t available, it allows your page to fallback to loading jQuery from a local path, on your own website.

Note: I have specified the CDN path without the http:// protocol. This is considered as a best practice to use that works on both HTTP and HTTPS pages. However this won't work if you are loading HTML pages directly from the disk without using a web server. In such cases, you will need to include the http protocol in the CDN url.

This is not a foolproof method and before making the switch from the CDN version to the local version, your browser could wait for 40-60 seconds for the DNS to timeout. Sometimes this could be an endless wait and could leave the page non-responsive for a long time and block the other page elements from loading. This is another good reason why scripts should be placed at the end of the page before the closing </body> tag and not in the <head> tag.

For a time based fallback solution and to avoid the DNS timeout, you can use LABjs(http://labjs.com ) or use yepnope(http://yepnopejs.com/ ) to load a local version of the script if the CDN version is not found.

For educational purposes and for those who are wondering how to fall back to multiple CDN's before loading the local jQuery file from your website, here's the solution (although this is highly unlikely and unnecessary)

<!-- Use Google's CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<!-- Fallback to Microsoft's Ajax CDN if Google CDN is unavailable -->
<script>
(window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"><\/script>'));
</script> 
<!-- Fallback to loading jQuery from a local path if both the CDN's are unavailable -->
<script>
(window.jQuery || document.write('<script src="/scripts/jquery-1.10.2.min.js"><\/script>'));
</script>

Each CDN provider is different and what CDN you pick really matters, especially if your website audience is heavily localized in one part of the world. CDN's hosted by Google and Microsoft are backed by a good network of datacenters. They are free, reliable and most of all provide caching, decreased latency and increased parallelism in your applications.

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on Google+
Further Reading - Articles You May Like!
Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and a new one recently at The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for nine times in a row now. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that represents premium web sites and digital publications comprising of Professional web, windows, mobile and cloud developers, technical managers, and architects.

Get in touch with him on Twitter @suprotimagarwal, LinkedIn or befriend him on Facebook



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by mehwishmishi1122 on Monday, July 7, 2014 2:57 AM
informative site