注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

xiaozhuge0825的博客

 
 
 

日志

 
 

Google Code是怎么实现页面加载速度提高30%-70%的  

2009-12-19 11:21:25|  分类: 网站优化 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 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


在High Performance Web Sites这本书里(我也没看过),作者写到只有10%-20%的页面加载时间是下载HTML,另外的80%-90%的时间都是在下载页面的其他元素,我想应该是指Image, Javascript, CSS等等。因为这些元素都是有单独的HTTP Request来加载的。而Best Practices for Speeding Up Your Web Site这篇文章的第一条铁律就是最大限度减少HTTP Request.


Google Code就是把精力集中在了减少那些"其他元素"的数量和大小,也就是减少Http Requests的数量,以下是他们进行的几项改进:


1. 合并减少网站的JavaScript和CSS文件

    下载Javascript和CSS文件会阻碍其他部分页面的生成,Google Code团队把常用的Javascript和CSS文件分别合并成了一个文件,这样就把原本的20个文件合并成了两个,HTTP request的数量也从20个减低到了两个,而且他们也去掉了javascript和css文件中的不必要的空格然后把function和变量的名字都改的很短。这个我相信,大家到google首页上点击右键看看google的网页源代码就知道google为了性能有多不择手段了。


2. 把经常使用的图片合并成一个

    Google Code网站上本来有七个全站使用的图片文件,包括google code的logo, 页脚的googley balls和其他小图片。

    虽然浏览器会并发的下载这些图片,但是google code还是把这些图片合并成了一个,这样就只有一个HTTP request了。然后显示的时候只显示这个大图片的一部分。例如原来的代码如下:

<img src="/images/plus.gif" />

他们给改成了:<div style="background-image:url(/images/sprites.gif); background-position:-28px -246px; width:9px; height:9px">&amp;</div></span>

我觉得他们真是绞尽脑汁了,而且也不知道这样做是不是起到了效果,感觉CSS定位要显示哪一部分也需要时间的吧。


3. 为Google AJAX API的加载模块(google.load)实现lazy loading

关于Google AJAX API可以参考我的另外一篇blog  借用Google的Javascript API Loader来加速你的网站

Google Code肯定用他们自己家的东西了,不过他们也挑出来了一些小毛病,在这些Google AJAX APIs(例如Jquery, prototype等等) 初始化和使用之前,需要首先加google loader模块 (google.load), 通常情况下,google.load可以通过在head之间加入一些代码加载:

<script type="text/javascript" src="
    script.src = 'http://www.google.com/jsapi?callback=googleLoadCallback';
    script.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(script);
}

 

通过Google Code做得测试,他们的页面加载速度大大提高了30%-70%, 惊奇!看来他们提供的这些方法并不是鸡蛋里面挑骨头,而是大有必要实施在我们的项目中的。


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/jinhuiyu/archive/2009/01/29/3854344.aspx

  评论这张
 
阅读(213)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018