夜游长空

Aaron Hopkins是Google的一位工程师，今天看到了他的一篇技术文章：Optimizing page load time。非常有新意的描述了一些我们在开发WEB应用的时候可能会遇到的关于页面加载速度的问题和技巧。现在流行AJAX技术，已经比以前点一个link就要刷新整个页面，效率高多了。但如何才能更加榨取网络带宽，让自己的页面更快的响应用户的请求呢？这位大哥让我们考虑三个问题：

• IE, Firefox, Safari都是默认禁用HTTP pipelining的（仅有Opera是开启的）。没有pipelining意味着用户的每个请求都必须得到服务器的响应并且这个请求必须释放自己的HTTP连接下一个请求才能发出。这样就会导致平均为round-trip（ping）延时除以最多允许的连接数量的额外传输延时。而且如果服务器端禁用了HTTP keepalives，这样还需要做TCP三次握手，将引入多一倍的延时。
• 默认情况下，IE仅允许对于每个HTTP/1.1服务器站点有2个连接，并且最多只能有8个连接。Firefox有类似的限制。所以如果使用4个主机名(hostnames)来代替仅使用一个，那么在载入一个页面的时候将可以使用更多的连接。（4个主机名IP地址可以是相同的。）
• 大多数DSL或者其他Internet连接都是不对称的。比如1.5Mbits down/128Kbits up，6Mbit down/512Kbit up等等。一般下行和上行的速度比率为5:1到20:1。这意味着，用户发送数据所需要的时间相当于接受5~20倍大小的数据所用的时间。一个请求一般为500bytes，所以如果需要接收的数据为2.5k到10k，那么请求的时间将会占据很大的因素。这就是说，如果请求很多很小的对象（images, css, javascripts），那么用户的上行速率将会成为瓶颈（听起来很诡异吧～）。

当然，提出问题不是牛人，解决问题才是牛人：

• 开启服务器对于页面额外对象（images, css files, javascripts etc.）的HTTP keepalives支持。如果担心达到服务器的最大连接数，那就把keepalive的超时设为5~10秒。
• 使用更少的额外对象。整个站点引用相同的一个css文件，一个js文件等等。如果一个页面用到了太多的gif图片，考虑使用css优化来减少图片的使用。
• 如果用户将加载大量的没有本地缓存或者不能做本地缓存的对象，那么要考虑将这些对象平均地分布到4个主机名(hostname)上。一般来说可以使用户以四倍的速度来接受数据。比如：原来是http://static.example.com，那么建立4个主机名：static0.example.com, static1.example.com, static2.example.com, static3.example.com。
• 尽量使用本地缓存。为尽可能多的对象加入Expires header，可以不依靠浏览器来验证本地缓存的正确性，如果你改变了内容，可以改变文件的地址。这样，浏览器会认为它是不同的对象。
• 对于一些特殊的内容可以直接返回304（Not Modified）。
• 最小化请求的大小。永远不要为images等设置cookies。建议使用单独的主机名来存储这些静态对象。
• 最小化数据的大小。如果可能，对所有的HTML和XML数据进行gzip压缩。（如果试图压缩Javascript，你会发现IE4~IE6虽然声称支持压缩的javascript，但是如果你这么做，将会导致严重的错误。）
• 考虑使用一些特殊的手段减少网络延时，这个主要是指能分布式存储网站的内容，能动态的把用户redirect到离他自己相对近一些服务器上。
• 还有几点涉及到如何进行网络站点的带宽效率测试了，有兴趣的同学自己看文章吧。:)

这些Tips虽然有些是知道的，但是在一篇文章中这么专业集中的介绍真的是第一次看到。而且令我感动的是，这篇文章不长，用20分钟完全可以认真的看一遍，可以说是我看到的技术文章的典范了。（呵呵，我看到的也不多～）再说这文章的内容，确实有丰富的知识性，回答了我很多问题，这也是我很喜欢这篇文章的原因。毕竟涨经验值是件很愉快的事情。（前几天还在奇怪，为什么yahoo的图片都放在yimg.com上面，为什么很多网站都有个img.sitename.com和js.sitename.com呢～）