相信很多接触到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">&</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="http://www.google.com/jsapi"></script>
通常情况下这段代码都是正常工作的,但是在他们优化静态内容显示的性能的时候,这段代码会阻碍页面其他部分页面的生成,只有这个script加载完毕以后,其他页面才能显示出来,所以google code就实现了这段代码的lazy loading,也就是只有在需要的时候才加载这段脚本。他们的实现方法:
???? 1) 在<head>标签内,使用DOM脚本来实现只有需要的情况下才加载google.load
?if (needToLoadGoogleAjaxApisLoaderModule) {
??? // Load Google AJAX APIs loader module (google.load)
??? var script = document.createElement('script');
??? 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
详细解决方案
Google Code是如何实现页面加载速度提高30%-70%的
热度:155 发布时间:2012-10-28 09:54:44.0
相关解决方案
- google map有关问题
- GWT 报错,能的请进: com.google.gwt.event.shared.UmbrellaException: Exception caught: Se
- google chrome浏览器中 查看框架的源代码,具体是干吗用的,为什么有些网页有这个选项,有些没有
- Google APi可以获取一个地址的所在商圈吗 ,也许百度Map api的java,php调用方法
- 关于 google map 经度和纬度的有关问题
- Google Maps v3 中交通的有关问题
- weservice调用Server returned HTTP response code: 500 for URL解决方法
- google.com进不去的时候解决方法。 散分
- 想开发一套基于GPS+GPRS+Google 地图的车辆管理系统,该如何做
- java.net.UnknownHostException: www.google.com.hk,该怎么处理
- google map api key 如何获得
- 一个关于QR code(二维码) 的有关问题
- \nbproject\build-impl.xml:332: Preverification failed with error code 1. 异常
- JEECG(J2EE Code Generation) 基于代码生成器J2EE智能开发框架 公布新版本通知
- it.sauronsoftware.ftp4j.FTPException [code=550,message= /DLL:Permission denied,该怎么处理
- 急求:PL/SQL Developer 的Product code、Serial number以及Password,该怎么处理
- 请教两个对象值相同(x.equals(y) == true),但却可有不同的hash code,这句话对不对
- Server returned HTTP response code: 403 for URL如何解决
- code lover解决办法
- MyEclipse错误:Java was started but returned exit code = 1
- google、百度的查询速度如此之快,而且并发数这么大,如何做到的
- EF5 code first 实体继承的有关问题
- 求ef code first课程
- FCIAddFile(failed: code 一 [Failure opening file to be stored in cabinet]
- QR-Code[二维码生成],有这样的控件吗?解决办法
- FCIAddFile(failed: code 1 [Failure opening file to be stored in cabinet],该怎么解决
- VS设置这个是作什么用的? C++ -> code Generation -> Buffer Security check,该如何解决
- SQLite.NET 找不到表, Google 了良久了都不行
- 请问个EF code first DbContext有关问题
- javascript取有点网页的html元素的offsetLeft,offsetTop数据不准,比如http://www.google.com.hk/