借助Google的Javascript API Loader加速你的网站
现在很多人都已经开始习惯于基于各种各样的JS库来编写自己的Javascript，其中尤其以jQuery最多。别的不说，有了jQuery，至少让我们控制页面元素更加方便快捷，让我们在编写js的时候不需要过多地考虑浏览器特性问题了。
但是jQuery功能越强大，它本身的文件也越大。虽然如今的互联网带宽是越来越宽，速度是越来越快。但是做网页的却一个个越来越在意自己的页面大小、图片大小、css大小、js大小。其实相对于服务器的运行效率、机房带宽和线路品质，通过优化js、css和图片文件能挤出来的几百k尺寸的下载量，在下载速度的提高上实在是太有限了。不过话说回来，做开发的做设计的，就是要有这样的精神，才不会让自己的作品像微软的操作系统一样，越来越庞大。从15张软盘到半张CD，到一张CD，直到两张CD，最后一张DVD……
在我们的js中，最大的一般还是js库，毕竟具体的功能实现只需要写一点点代码而已。但是js库里那么多用到的没用到的东西，还是有点份量的。我们又想用，又嫌它大。怎么办呢？拆成很多个吧，多一个js还多一个并发连接呢…… 幸好，google挺够意思，号称”永久提供”常见js库，google的服务器和线路品质那自然是不在话下的。即提高了下载速度又减少了自己服务器的并发连接数。不用就是傻子了，这样在访问量比较大的情况下可以分担主服务器的压力。
如果你的网站用到了一些主流的Ajax library比如JQuery或者Prototype的话，你可以直接用Google Javascript API loader来加载你的ajax library。
用起来也很简单，直接在网页里引用google服务器上的相关js文件就可以了。不过，如果引用多个js，就要插入多段的script。现在像我这样代码能少一个字算一个字的人不少。google也提供了相应的办法，那就是google load。我们只需要在页面里引用一个js文件，就可以根据需要实时加载用到的js库了。首先在页头部分加入以下这行代码：
1 2 | <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("prototype", "1.6");</script> |
因为google使用CDN（内容分发网络）来向客户端发送数据，速度肯定比你的服务器要快，而且客户端浏览器根据链接来缓存内容，所以使用Google Javascript API loader的网站越多， 客户端缓存命中的几率也就越大。
现在Google 的AJAX Library API已经支持了大部分主流的AJAX框架：
1 2 3 4 5 6 7 8 | jQuery jQuery UI Prototype script.aculo.us MooTools Dojo SWFObjectNew! Yahoo! User Interface Library (YUI) |
而且google的API中包括这些js框架/库的所有正式发布版。你可以根据自己的需要来选择。以jQuery为例，我们可以这样使用：
1 2 3 | <script type="text/javascript"> google.load("jquery", "1.3.2");//加载jQuery 1.3.2 </script> |
这样我们就从google的最近的CDN镜像上加载了jQuery 1.3.2版的js库，接下来就可以正常写js代码了。不过，即使是google的CDN镜像，下载也毕竟是需要时间的，万一代码库还没有下载完而浏览器已经解释到了下面的代码了怎么办？我们可以设定在js库加载完以后才开始执行js：
1 2 3 4 5 6 | <script type="text/javascript"> google.load("jquery", "1.3.2"); //加载jQuery 1.3.2 google.setOnLoadCallback(function() {//加载完成后执行代码 $("body").html("Hello World!"); }); </script> |
完整的示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My Google AJAX Search API Application</title> <script src="http://www.google.com/jsapi?key=AAAA" type="text/javascript"></script> <script language="Javascript" type="text/javascript"> //<![CDATA[ google.load("search", "1"); function OnLoad() { // Create a search control var searchControl = new google.search.SearchControl(); // Add in a full set of searchers var localSearch = new google.search.LocalSearch(); searchControl.addSearcher(localSearch); searchControl.addSearcher(new google.search.WebSearch()); searchControl.addSearcher(new google.search.VideoSearch()); searchControl.addSearcher(new google.search.BlogSearch()); // Set the Local Search center point localSearch.setCenterPoint("New York, NY"); // Tell the searcher to draw itself and tell it where to attach searchControl.draw(document.getElementById("searchcontrol")); // Execute an inital search searchControl.execute("Google"); } google.setOnLoadCallback(OnLoad); //]]> </script> </head> <body> <div id="searchcontrol">Loading...</div> </body> </html> |
Google AJAX API 密钥申请请点击这里。
参考
http://code.google.com/intl/zh-CN/apis/ajax/documentation
http://code.google.com/intl/zh-CN/apis/ajax
http://code.google.com/intl/zh-CN/more
http://code.google.com/apis
http://code.google.com/intl/zh-CN/
Monitor Your Web Site 24/7 - Receive email and SMS alerts anytime your web site goes down.
