Should I have my web pages reference a copy of jquery.js on my own server or from the code.jquery.com?

Question

I am new to javascript etc so may be this is dumb question.
I was looking into JQuery-UI tutorials and they have:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>     
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />    
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>    
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

If I can include js code like this, why would I ever need to download the jquery library?

Answer 1

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
if (!window.jQuery) {
    document.write('<script src="/path/to/your/jquery"><\/script>');
}
</script>

When you use a CDN, the users don't have to download the jquery file again as they most probably already have it cached.

The code in second script tag checks if the jquery was available from CDN or not, and falls back to local copy of jquery on your machine.

Answer 2

If you wanted to work locally, it's better to have a local copy.

What you're looking at is called a CDN - a Content Delivery Network. It's beneficial because it allows potential caching of the resource across multiple websites, as well as not counting towards your same-network limit imposed by the browser.

The HTML5 Boilerplate does it a bit differently:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>

As you can see, we're using a protocol-relative path, so if you were to look at your work locally (without running a local server), your browser would hang while it tried to find the resource on the file:// protocol. Another good reason to have a local copy.

Answer 3

It depends on your project setup and requirements. From my experience I have found the following reasons to download 3rd party js libraries, that are otherwise publicly available:

• Intranet Systems. If the application is an intranet system that has no access the to outside world, then a local copy is a must

• Restricted Hosting Environment. If for some reason the hosting environment cannot access certain adresses with resources for the app, or is explicitly configured not to, then local copies are the way to go

• Performance. If the connection to the original library url is slow, and caching is not enabled on the clients (a rare or very specific case), perhaps the application would need to maintain its own copy

A different approach is to have a content delivery network (CDN) that is set up in a way to specifically serve your application with resources. Then, it is the CDN's responsibility to use the most appropriate way of fetching the resources. The application only needs to have access to the CDN. This is a preferred solution for many systems as the content management is decoupled from the application and also because CDN-s perform better with most browsers.