Nerds at Work

RSS

How to Use Pre-Cached Javascript Libraries: Google’s AJAX API

Written by Brian on January 13, 2009 – 9:15 pm -

Recently, I stumbled on Google’s AJAX API project.

There are a number of things I like, but there is one thing that everyone can use: Google’s hosted Javascript libraries.

Last year, Google launched a project to host a handful of popular Javascript libraries. Among the initial offerings is jQuery – the Javascript library that I use on this site. They also have some other widely used options – like prototype and MooTools.

Basically, Google hosts the most recent (and some legacy versions) of the library on its server. You can then link the remote copy of the JS library to your site instead of hosting it yourself.

Why Should I Use Google Hosted Javascript Libraries?

Because it could be faster.

If two sites use the same Javascript library but host it locally, the user has to reload and recache the library for each site. jQuery.js on life-of-brian.com is different from jQuery.js on css-tricks.com – even if the file is exactly the same.

By pointing the user’s browser to the Google server, it will recognize that .js file in the cache and not download it a second time. So if life-of-brian.com and css-tricks.com both used the jQuery library on Google’s servers, the user would have to cache it once – and it would be preloaded when he or she visited the second site.

A secondary benefit (of concern only to large sites) is that it doesn’t put a strain on your bandwidth. This shouldn’t be a big deal for most people, but some high volume sites may find this comforting.

How Do I Load Google’s Hosted Javascript Libraries?

You could use the fancy load() function of Google’s AJAX API, or you could simply add a <script> element using the remote address on Google’s server.

I chose to go the second route with this site. I wanted to load both the jquery library and the jquery ui library (mainly for the tabs in the sidebar), so I included the following two lines in my header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" type="text/javascript"></script>

You can find a list of all the URLs on the AJAX API documentation page.

Why Not Do This?

I don’t see a lot of potential for harm, but there could be some drawbacks.

No version control. Presumably Google is going to keep hosting important legacy versions of each library, but this takes version control somewhat out of your hands. It also means you can’t use the development releases – only the stable releases are hosted on Google’s server.

No hacking the library. You won’t be able to introduce custom hacks into the library if its hosted on Google’s server. I don’t know how many people do that anyway. I’ve never jumped into to hack a compressed library file – I just use it as is and add any custom code to another .js file.

Google could sabotage your site. Unlikely, but I suppose it’s possible. If you’re paranoid, steer clear.

Check It Out

I’ve been using it for a week or so, and I haven’t noticed any problems. In theory, it’s a great idea, but it’ll only work if a large number of sites (especially highly trafficked sites in a variety of niches) opt to use it.

I’m going to do my part and point my users to Google’s servers. Why don’t you?

Posted in Nerds at Work, Web Design | 2 Comments »
Tags: ,

2 Comments

  1. istanbul Escort, September 12, 2011:
  2. istanbul Escort, September 12, 2011:

Leave a Comment