Benefits vs. Pitfalls of hosting jQuery locally

Question

We're currently pulling jQuery and jQueryUI (and jQueryUI CSS) libraries from the google CDN. I like this because I can call google.load("jquery", "1");
and the latest jQuery 1.x.x will be used.

Now I am to pull the libraries locally because of security.

I'm happy to pull them locally but I'm wondering what are some of the other benefits and pitfalls to watch out for?

Solution 1

The main benefit of having them on a CDN is that the files can be downloaded in parallel to files downloaded from your own website. This reduces latency on every page. So, the flip side of this is a pitfall of hosting locally - increased latency. The main reason for that is that browsers are limited in the number of connections that they can make at the same time to the same web domain. In IE6 this was defaulted to 2 concurrent connections to the same domain - shared between all open windows of IE!! In IE8+ it improved, defaulting to 6, which is inline with FF/Chrome, but still, if you have a lot of images and you are not using sprites, you will experience heavy latency.

Using a CDN, I would always set the library version explicitly rather than getting the latest one. This reduces the risk of new versions breaking your code. Not very likely with jQuery, but possible.

The other main benefit of using a CDN is reduced traffic on your site. If you pay per GB or you are on a virtual server with limited resources, you might find that overall site performance increases and hosting costs come down when you farm off some of your content to a public CDN.

Make sure you also read the other answer to this question by @Xaver. This is a very good trick

Solution 2

I always use the CDN (Content Delivery Network) from Google. But just in case it's offline:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.2.min.js"><\/script>')</script>

Grab Google CDN's jQuery and fallback to local if necessary

Edit: If you don't need to support IE6 and your site has partial https usage you can remove the http as well:

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

Solution 3

Others have covered the benefits. Pitfalls:

• If you only include content from your own server, that's one server that needs to be running—and not blocked by firewalls etc—to make your site work. Pull script from a third party and now that's two servers that need to be running and unblocked to make your site work.

• Any site you pull <script> from can completely control the user's experience on your site. If Google were feeling evil they could put something in their copy of jQuery to log your keypresses, steal personal information from the page you're on to tie into their web tracking database, make you post “I love Google!” comments to every form, and so on.

Google probably aren't actually going to do that, but it's a factor that's out of your control, and certainly something to worry about with other script-hosting services. There have been incidents before where stats scripts have been compromised with malware loaders.

Before including any script from a third party—even on one single page of your site—you must 100% trust them with all user-accessible functionality visible on that hostname (including web-facing admin functions).

Solution 4

Google CDN:

• caching, good for performance, more users likely to have it already, and it downloads in parallel
• if ever, heaver forbid cdn goes down. you're screwed.
• if a new version breaks your existing plugins or site, you'll know about it possibly too late

Locally:

• development without being connected to the net is possible
• can still get some performance benefits by gzipping, in addition to minifying

Solution 5

I prefer to use my local version, because I don't have control about what they will provide. For example I don't want my users to get affected by google-analytics or anything similar, because this is a legal problem in my country.

View more solutions

Comments

[Ascherer]

however the jquery u load from google's cdn is minified. Another plus to using a cdn is it is cleaner for your directory structure :)

[JasCav]

Google wouldn't do that...I LOVE GOOGLE...would they? :-p

[Barry]

Another benefit of setting the library version explicitly is google gives it a longer cache time, For instance specifying 1.9.1 will give a longer cache lifetime than just requesting 1.9 (as a new jQuery 1.9 version might be released but 1.9.1 will always be the same).

[oucil]

Credit to the community: stackoverflow.com/questions/1014203/…

[George Chalhoub]

XVIDEOS uses this solution now :P

[Naltroc]

Excellent points regarding security issues.

[bren]

Solution to point number 2

[twknab]

Good points: never thought about how a remote CDN script could get hacked and then pulled down onto my site. Probably not common for major libraries like jQuery, jQueryUI, Boostrap, etc, but just like noted, smaller, less supported libraries could fall victim, especially if they're not kept up to date. Good points +1

[TommyAutoMagically]

I must be missing something here... Doesn't this approach assume that the CDN-loaded jQuery will load and be interpreted before the next line (!window.jQuery...) is interpreted? <script> tags are processed asynchronously, right?

[Xaver]

<script> tags are processed synchronously! On the second line jQuery must be loaded already but just in case if not we inject some JS to load it locally. The document.write will never be executed if jQuery exists already.

[ashleedawg]

uhhh - revaxarts? I see no such answer, neither current nor deleted. What's the "very good trick"?

[Adam]

if a new version breaks your existing plugins or site, you'll know about it possibly too late you can specify the version in the CDN link, to avoid that.