相信很多接触到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%， 惊奇！看来他们提供的这些方法并不是鸡蛋里面挑骨头，而是大有必要实施在我们的项目中的。
分享到：
相关推荐
如何在Asp.Net1.1中实现页面模板(所谓的MasterPage技术) Tool Tip 示例（FILTER版） Tool Tip示例 （htc版） 一个.net发送HTTP数据实体的类 按键跳转以及按Enter以不同参数提交，及其他感应事件 动态控制Page页的...
结果，页面的尺寸变小并且加载速度更快。 还提供了命令行版本的压缩器。 以下是一些使用默认设置HTML压缩结果的示例： 网站名称原来的压缩的减少英国广播公司77,054b 55,324b 28.2％ 网络86,492b 61,896b 28.4％ ...
4、优秀的页面加载速度 5、针对搜索引擎收录而优化的功能。 6、产品批量图片上传 7、无限分类 8、网络联盟分销功能 9、优秀的订单系统和退货管理功能 10、易于操作的可视化界面 11、灵活的模版和插件机制 12、安装...
·修正工程中加载lib路径不正确的bug ·修正鼠标滚轮在停止取图监视时使用上的Bug ·修正鼠标进入窗口后，还可以开启监视的Bug 2. 功能添加： ·添加色彩信息面板 ·实现取色功能，用Ctrl+C...
1.访问http页面内容，输出到标准输出 ... 2.生成文件 ...以远程文件名保存 ... ...curl -o /dev/null -s -w %{time_...82:无法加载CRL文件，丢失或格式不正确(在7.19.0版中增加 ) 。 83:签发检查失败(在7.19.0版中增加 ) 。
一个灵活灵活的Selenium页面对象模型生成器，以提高敏捷测试过程的速度。 Selenium Page Object Generator是改善您的工作流程的重要工具。 只要配置了所有选项和模板，它将在活动的Chrome选项卡上单击生成页面对象...
因此，如果下一页/上一页的加载速度如此之快，则动画可能不会发生，或者进度只有进度的一半，即使箭头图像也没有显示 -动画箭头可能指示所使用链接的类型。如果扫描的链接用于下一个/上一个链接，它将使用蓝色背景。...
缩略图片延迟加载(lazyload)，提高页面加载速度; 手机端底部固定浮动栏，可添加拨号联系等选项; 自动获取文章首张图片作为缩略图; 边栏滚动到底部后固定位置功能; 微信分享显示描述、缩略图功能; 支持手机分享图片...
您是否已厌倦了单击票证链接并等待它们加载，然后这些浏览器扩展适合您-Google Chrome和Mozilla Firefox扩展。 该扩展程序将创建一个iframe并在其中打开票证。 结果是：在web2py开发过程中调试速度大大加快。 构建...
一、申请短信通道，国内的短信通道很多，不同的通道速度不一样，我们在申请时要一个基本原则就是速度要快，基本上要发送即接收了，客户不可能等的。国内调查发现，客户等网页打开的时间是最长不超过5秒，短信接收的...
缩略图片延迟加载（lazyload），提高页面加载速度； 手机端底部固定浮动栏，可添加拨号联系等选项； 未设置特色图片自动获取文章首张图片作为缩略图（外链图片自动将首张图片保存到本地并设置为特色图片）； 边栏...
2014年04月30日 V2.84更新包（推荐升级） 1.修复安装向导配置时对数据库字符过滤不严存在入侵漏洞 2.修复后台模板样式文件字符过滤不严存在入侵漏洞 3.修复后台登录验证没有清空验证码信息，导致增加暴力解密风险 4....
要等到页面全部加载完毕才执行，注意是全部加载，包括dom,图片等其它资源。 而$(document).ready(function(){ alert("hello"); });(1) 当dom加载完就可以执行了。 代码1同时做到表现和逻辑分离。并且可以在...
10.1.4 滚动速度属性——scrollamount 205 10.1.5 滚动延迟属性——scrolldelay 206 10.1.6 滚动循环属性——loop 207 10.1.7 滚动范围属性——width、height 208 10.1.8 滚动背景颜色属性——bgcolor 209...
您还可以启用一项功能，该功能可以为您查看的页面收集图标。 如果您查看标签的速度过快，则可能不会生成图标，也不会在标签点击历史记录中显示该图标。 但是，在正常使用情况下，如果您松开了仅位于该选项卡而无法...