What is the best way to include latest version of jQuery?

Question

I'm developing sites using Wordpress and I want to use the lates version of jQuery.

To make sure I use the lates version, I have found this piece of code from Binary Bonsai's example.

What I see, is that he actually links to jQuery at Google API.

So my question is, what is better.

To link to jQuery on an external page?
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

or to have the jquery file locally?
wp_enqueue_script('jquery', '/js/jquery-1.4.2.min.js');

UPDATE

Thanks to Colin, the answer is actually here:
http://stackoverflow.com/questions/2180391/why-should-i-use-googles-cdn-for-jquery

But tjust in case you don't have Google in your search term, like me, I'll copy the answer from John Gietzen

1. It increases the parallelism available.
   (Most browsers will only download 3 or 4 files at a time from any given site)

2. It increases the chance that there will be a cache-hit.
   (As more sites follow this practice, more users have the file already ready.)

3. It ensures that the payload will be as small as possible.
   (Google can pre-gzip-compress the file, making the time-to-download very small.)

4. It reduces the amount of bandwidth used by the server.
   (Google is basically offering free bandwidth.)

5. It ensures that the user will get a geographically close response.
   (Google has servers all over the world, further decreasing the latency.)

Answer 1

That would not get you the latest version. That would get you 1.4.2 every time.

This would, though:

http://code.jquery.com/jquery-latest.min.js

Though, I would prefer local, and lock the version at the point where I developed it and verified it was working...

Answer 2

You can leave out the minor or dot versions when linking to the google CDN copies, like this:

• jQuery 1.4.2: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
• Latest 1.4.x: http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
• Latest 1.x.x: http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Given this flexibility, I much prefer the remote version, it's quick to get bug fixes by just changing the URL and the file's loaded faster (in most cases) because it's pulled from another domain (and not in the count of parallel requests to your domain). There are other related questions on this, here and here.

Answer 3

I'm sure there are pros and cons of each, but I personally prefer to have the file locally. My reason for this is that it is possible that at sometime in the future a feature might get deprecated, and if you happen to use that feature in your now stable and long unmodified script, then it may break your code.

Answer 4

Notice that the external jquery.js file is version 1.4.2 and that wouldn't change if jQuery were updated. Would you really want the jQuery codebase to update without you knowing? If your code is working, why risk breaking it by letting the jQuery version update automatically?

Answer 5

As Nick Craver mentioned in his answer, you can leave out the major/minor versions from the URLs for the google CDN.

The main benefits of using a CDN for these sorts of files though is the performance benefit and the saving in bandwidth.

Any recent browser will use a cached copy of files which have been accessed before, and as this (along with many others) is used on thousands (millions?) of sites across the net, it's very likely that users visiting your site will already have this file cached.

So it saves the users bandwidth, as well as your own. And that's never a bad thing.

Also, if there is a new version of the jQuery framework available, even if you hosted it locally, you'd still have to update the local copy, wouldn't you?

Answer 6

1) Local file

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

or, if you use Wordpress: wp_enqueue_script('jquery', '/js/jquery-latest.min.js');

You have to download the latest when a new version comes out, and rename it to jquery-latest.min.js. If is the easiest if you hardcode the file reference on many pages.

2) from Google CDN

<script src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
<script>
google.load('jquery', '1.4.2');
</script>

or

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

You have to update the version number to the latest when a new version comes out. Easier than method one if you have a template that allows you to update a single place to reflect the change on every page.

3) from jQuery’s server

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"&gt;&lt;/script&gt;

Easy as it is always the latest. However, it may not be as reliable and fast as Google's CDN.