Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

jQuery 1.4.0 and Google.Load() in the Garden

MBZMBZ
edited January 2010 in Vanilla 2.0 - 2.8
@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?

Comments

  • MarkMark Vanilla Staff
    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?
  • 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/
  • 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.
  • MBZMBZ
    edited January 2010
    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.
  • 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
  • @benno - see "Test 2" above. It uses this method, and had the fastest result.
  • 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.
  • 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.
  • 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.
Sign In or Register to comment.