jQuery 1.4.0 and Google.Load() in the Garden

MBZ

@Mark - I noticed you guys are using a fairly old version of jQuery in the Garden 1.3.2. jQuery 1.4.0 was released yesterday with some major performance improvements amongst other things. You can read about it here: http://jquery14.com/day-01/jquery-14

Additionally, have you considered using Google.Load() to pull the main jQuery library?

Mark

I didn't know the new jQuery was out. Sweet!

As for Google.Load(). I didn't know much about it before you posted this. I checked it out. Regarding autoloading, they say:

It is possible to auto-load a list of APIs or Javascript libraries when including the loader script. This can be done in order to reduce the load time in many cases by eliminating a single Javascript request at load time. This advanced feature can be difficult to implement, depending on the exact situation. Therefore, we recommend that auto-loading only be considered in specific cases when a reduction in latency is crucial.

Is that what you thought we should use it for?

MBZ

We use it in our web applications at work, and have been happy with it. Here's a random blog I found outlining some perceived benefits: http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

In my mind, the biggest benefit is caching of the jQuery js file across many many sites. If a user has visited one of these sites that has pulled the jQuery file from Google.Load() in the past, in theory they wouldn't need to pull it again, as it would be cached. With many of the large sites already using jQuery, and many using Google.Load(), this could in theory save the users a very small amount of data to load.

As far as real world performance gains, I have no examples or data to back that up. They do however deliver it compressed and from a CDN, so it's fast. I'll run a test over the weekend and compare loading times and file sizes from my server vs. using Google.Load() and report back my findings.

Anyway, if you decide to use it, it's very easy to implement. All you need to do is to include the following javascript file from Google first: http://www.google.com/jsapi

And, then, once that is loaded, you use Google.Load() to pull the jQuery library using:
google.load("jquery", "1.4.0");

Or, if you wanted to load another version of the script, you'd call it's version number accordingly, like:
google.load("jquery", "1.3.2");

They host all the major Javascript frameworks and some other goodies. More information on Google.Load() and their API's can be found here: http://code.google.com/apis/ajax/documentation/

PS: The new jQuery docs are somewhat buried at the moment, as the main documentation link on their site still refers to 1.3.x. You can find the 1.4.x docs here: http://api.jquery.com/

MBZ

Test 1: Loading jQuery using Google.Load()
http://mikeburrelljr.com/jquery-test/test1.html

Results: 4 requests (29KB) 192ms

GET test1.html (619B) 51ms
GET stats?r0=el%7Cjquery&nc=1263605450438_5992 (43B) 47ms
GET jsapi (5KB) 64ms
GET jquery.min.js (23KB) 54ms

-----

Test 2: Loading jQuery directly from Google (via script tag)
http://mikeburrelljr.com/jquery-test/test2.html

Results: 2 requests (23KB) 124ms

GET test2.html (549B) 52ms
GET jquery.min.js (23KB) 69ms

-----

Test 3: Loading jQuery from local server (via script tag) - same method as currently used in Vanilla
http://mikeburrelljr.com/jquery-test/test3.html

Results: 2 requests (68KB) 271ms

GET test3.html (506B) 50ms
GET jquery-1.4.min.js (68KB) 217ms

-----

Overall, Test 2 provided the fastest results with the leads amount of calls. For a true test, you'd probably want to repeat this several times and average the results. Either way, we're not talking a huge performance increase, but it is an increase none the less.

When you couple this with the fact that the jQuery file will most likely be cached from another site using either of the Google methods, you get an even bigger increase. Will it change the world? No. But seems like a no-brainer optimization point.

MBZ

Note: I think the performance gains are coming from Google delivering the files to you Gzipped. I'm sure you could configure your server to do this to, however you don't do this on the Vanilla site - nor is it "setup" this way out of the box (server configuration change). They are also being loaded via their CDN which also probably helps.

benno

Probably easiest way to change it is to direct link to the js file:

http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

MBZ

@benno - see "Test 2" above. It uses this method, and had the fastest result.

fredwu

Use only the Google CDN will make local development without an Internet connection difficult...

P.S. "google.load()" is the preferred way of loading the libraries, according to Google.

benno

Just stumbled across the following on stackoverflow:

http://stackoverflow.com/questions/1014203/best-way-to-use-googles-hosted-jquery-but-fall-back-to-my-hosted-library-on-goo

Which suggests a fall-back for when the CDN's are down - or will also cater for local development where an internet connection is not available.

Dinoboff

The CDN use should be optional. People might not want to rely on a third party for some of their content or cannot for privacy issues.