Google Code是怎么实现页面加载速度提高30%-70%的
相信很多接触到Web开发方面的人都知道Yahoo Developer Network的一篇文章 “Best Practices for Speeding Up Your Web Site” 我觉得这篇文章称作Web开发的圣经也不算过分，他们的34条铁律我几乎每隔几天都要温习一下并努力实践到自己的工作中。没有看到过这篇文章的人可以赶快看一下 Best Practices for Speeding Up Your Web Site
在HighPerformanceWebSites这本书里(我也没看过)，作者写到只有10%-20%的页面加载时间是下载HTML，另外的80%-90%的时间都是在下载页面的其他元素，我想应该是指Image,Javascript,CSS等等。因为这些元素都是有单独的HTTPRequest来加载的。而BestPracticesforSpeedingUpYourWebSite这篇文章的第一条铁律就是最大限度减少HTTPRequest.
GoogleCode就是把精力集中在了减少那些"其他元素"的数量和大小，也就是减少HttpRequests的数量，以下是他们进行的几项改进：
1.合并减少网站的JavaScript和CSS文件
下载Javascript和CSS文件会阻碍其他部分页面的生成，GoogleCode团队把常用的Javascript和CSS文件分别合并成了一个文件，这样就把原本的20个文件合并成了两个，HTTPrequest的数量也从20个减低到了两个，而且他们也去掉了javascript和css文件中的不必要的空格然后把function和变量的名字都改的很短。这个我相信，大家到google首页上点击右键看看google的网页源代码就知道google为了性能有多不择手段了。
2.把经常使用的图片合并成一个
GoogleCode网站上本来有七个全站使用的图片文件，包括googlecode的logo，页脚的googleyballs和其他小图片。
虽然浏览器会并发的下载这些图片，但是googlecode还是把这些图片合并成了一个，这样就只有一个HTTPrequest了。然后显示的时候只显示这个大图片的一部分。例如原来的代码如下：
<imgsrc="/images/plus.gif"/>
他们给改成了：<divstyle="background-image:url(/images/sprites.gif);background-position:-28px-246px;width:9px;height:9px">&</div></span>
我觉得他们真是绞尽脑汁了，而且也不知道这样做是不是起到了效果，感觉CSS定位要显示哪一部分也需要时间的吧。
3.为GoogleAJAXAPI的加载模块(google.load)实现lazyloading
关于GoogleAJAXAPI可以参考我的另外一篇blog借用Google的JavascriptAPILoader来加速你的网站
GoogleCode肯定用他们自己家的东西了，不过他们也挑出来了一些小毛病，在这些GoogleAJAXAPIs(例如Jquery,prototype等等)初始化和使用之前，需要首先加googleloader模块(google.load),通常情况下，google.load可以通过在head之间加入一些代码加载：
<scripttype="text/javascript"src="http://www.google.com/jsapi"></script>
通常情况下这段代码都是正常工作的，但是在他们优化静态内容显示的性能的时候，这段代码会阻碍页面其他部分页面的生成，只有这个script加载完毕以后，其他页面才能显示出来，所以googlecode就实现了这段代码的lazyloading，也就是只有在需要的时候才加载这段脚本。他们的实现方法：
1)在<head>标签内，使用DOM脚本来实现只有需要的情况下才加载google.load
if(needToLoadGoogleAjaxApisLoaderModule){
//LoadGoogleAJAXAPIsloadermodule(google.load)
varscript=document.createElement('script');
script.src='http://www.google.com/jsapi?callback=googleLoadCallback';
script.type='text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}原文：