What's the best way to load jQuery?

Question

Possible Duplicate:
Where do you include the jQuery library from? Google JSAPI? CDN?

I have an application that uses jQuery. The application could use almost any recent version of jQuery such as 1.7 or 1.8.

Can anyone give me a suggestion as to how I could code my application to maximize the chances of it finding a recent version of jQuery that would meet my needs in the users cache. For example should I try and look for a version from the google CDN and in which case which version should I try and look for?

Answer 1

The use of a Content Delivery Network (CDN) for public web sites is quite common. To reference one you include them with a script tag like any other local file:

jQuery example

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Google example

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Microsoft example

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min.js" type="text/javascript"></script>

Should I always reference the latest version?

There is a risk when doing so, when for example using the jQuery CDN to always point to the latest version.

In the last few versions several methods have been deprecated, i.e: toggle() - for mouse events, live(), die() and others.

As far as I know from the jQuery forums is that those deprecated methods will be permanently removed in version 1.9.

In addition jQuery plans to release 1.9 and 2.0 close together. However 2.0 is not a continuation of 1.9 but instead will be developed on along-side.

2.0 will not support IE6, IE7 or IE8. jQuery 1.9 will stay compatible with all previous browser versions.

Read about it here.

For those reasons I would not recommend to automatically always point to the latest version but explicitly reference the specific version you are supporting.

What if the CDN is down

It rarely happens but it could happen that the CDN is down. Just in case, so you don't have to suffer the consequence, you can implement a fallback plan.

// Check if jQuery was initialized and if not (CDN was down for example), then
// load jQuery from a local source.
if(typeof jQuery === 'undefined'){
    document.write(unescape("%3Cscript src='yourlocalpath/jquery.1.x.min.js' type='text/javascript'%3E%3C/script%3E"));
}

CDN availability and performance evaluation

Regarding the quality and performance on available CDNs I came across this very interesting article on royal.pingdom.com.

The report from Pingdom revealed that the most commonly used, and free hosts of jQuery; Google, Microsoft and Media Temple; have proved reliable but with inconsistent performance.

To evaluate the networks, Pingdom performed tests from multiple locations across Europe and North America, once per minute, around the clock for 30 days.

The results found that all three offered excellent availability but that wasn't the case for performance.

For sites that don't use HTTPS or secure servers, Media Temple was by far the fastest followed by Google in Europe but lagged behind in North America. For HTTPS sites Google was the fastest in Europe with Google and Microsoft performing similar in North America.

Microsoft performed the worst in Europe but was even with Google in North America overall.