WebMuch

What is Google’s CDN?

Google CDN stands for Google Content Distribution Network. It provides a loading architecture for the most popular, open source JavaScript libraries.

Why should I use Google’s CDN links?

Most of the websites I see, still host their JavaScript Library on their own server (Most, not all). Actually never have I ever seen any Web Development Blog hosting the library on their own server. They always use Google CDN, which is great because it has a number of advantages:

1. Google’s Content Distribution Network has libraries on their various servers across the world and if you use their CDN link, when a user’s browser resolves the URL, their browser will automatically download the file from the closest available server, which will be a much faster download than if you force a user to download the file from your host server in whichever country your website is hosted.
2. Google’s Content Distribution Network will save you a great deal of bandwidth if you have large traffic on your website and a limited bandwidth with your host.
3. There is a good chance that the Google hosted version of that library is already cached on the user’s browser cache, as lot of big websites and portals use Google’s CDN links including Google itself and Google’s servers instruct browsers to cache the file for one year if there are quite a few requests for the same hosted file.

How to use Google CDN?

Google’s CDN provides most of the popular, open source JavaScript Libraries with two ways of using each of them via the direct path in the <script/> tags and via The Google AJAX Libraries API.

To use the Google AJAX Libraries API we need to include the Google “jsapi” script:

<script src="http://www.google.com/jsapi"></script>

The Google AJAX Libraries API provides a simple and powerful google.load() method which accepts two arguments, the first argument to google.load is the name of a library. The second argument is the version of the library:

<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
    google.setOnLoadCallback(function(){
        // use this instead of:
        /*
            $(document).ready(function(){  });
        */
    });
</script>

But to use this API, there is a different approach for the ready functions of all the libraries. For example, in the above code, we use google.setOnLoadCallback(function(){ }); instead of jQuery’s ready function. In-fact we use google.setOnLoadCallback(function(){ }); instead of all different library’s ready functions. This can be seen as a drawback or a good feature; I see it as a good feature as it gives me a single ready function for all libraries.

The second method to use Google’s CDN links is by the direct paths of the libraries in the <script/> tags

Below is a list of all the JavaScript Libraries Google CDN provides with the direct paths and google.load implementation:

jQuery

name: jquery
versions: 1.2.3, 1.2.6, 1.3.0, 1.3.1, 1.3.2
load request: google.load("jquery", "1.3.2");
extras: uncompressed:true, e.g., google.load("jquery", "1.3.2", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
path(u): http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js

jQuery UI

name: jqueryui
versions: 1.5.2, 1.5.3, 1.6, 1.7.0, 1.7.1
load request: google.load("jqueryui", "1.7.1");
extras: uncompressed:true, e.g., google.load("jqueryui", "1.7.1", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js
path(u): http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.js
note: This library depends on jquery. Before loading this module, you must load jquery. e.g.:
        google.load("jquery", "1.3.2");
        google.load("jqueryui", "1.7.1");

Prototype

name: prototype
versions: 1.6.0.2, 1.6.0.3
load request: google.load("prototype", "1.6.0.3");
path: http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js

script.aculo.us

name: scriptaculous
versions: 1.8.1, 1.8.2
load request: google.load("scriptaculous", "1.8.2");
path: http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js
note: This library depends on Prototype. Before loading this module, you must load Prototype. e.g.:
        google.load("prototype", "1.6");
        google.load("scriptaculous", "1.8.2");

MooTools

name: mootools
versions: 1.11, 1.2.1, 1.2.2
load request: google.load("mootools", "1.2.2");
extras: uncompressed:true, e.g., google.load("mootools", "1.2.2", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js
path(u): http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools.js

Dojo

name: dojo
versions: 1.1.1, 1.2.0, 1.2.3, 1.3.0, 1.3.1
load request: google.load("dojo", "1.3.1");
extras: uncompressed:true, e.g., google.load("dojo", "1.3.1", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js
path(u): http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js.uncompressed.js

SWFObject

name: swfobject
versions: 2.1
load request: google.load("swfobject", "2.1");
extras: uncompressed:true, e.g., google.load("swfobject", "2.1", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js
path(u): http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js

Yahoo! User Interface Library (YUI)

name: yui
versions: 2.6.0, 2.7.0
load request: load request: google.load("yui", "2.7.0");
extras: uncompressed:true, e.g., google.load("yui", "2.7.0", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js
path(u): http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader.js

Source: Google

Thanks for reading.