What's the best way to load jQuery? [duplicate]

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.

Answer 2

Pick the most recent version of jQuery that meets your needs. At this moment, that would be 1.8. Then link to it on a free and widely used CDN (Google or Microsoft probably).

You should link to a specific version of jQuery. Though there is a link for the latest version of jQuery, you should NOT link to that because when that changes, your site could break without you knowing it. You should link only to a specific version of jQuery. Here's the code for linking to 1.8.1 on the Google CDN.

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

If you really want to optimize your browser cache hits, you would pick and test with a version of jQuery that is widely deployed now (I believe there are web statistics somewhere on how much each version is being used) and then you would regularly update that to track the most used version. I suspect that this is micro-optimizing and just picking any recent version that you've tested with is suitable and will give you the benefits of using a common CDN.

Answer 3

I would recommend referencing a static version number from the Google or Microsoft CDN. Use the latest version for development now. If you make changes that require newer features, just change your reference in your layouts.

The Google CDN looks like:

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