为什么以及如何减少高性能WEB开发的请求数量！

http请求头中的数据量。让我们首先分析请求头，看看每个请求会带来哪些额外的数据。以下是谷歌监控的请求头。主机www.google.com.hk用户代理Mozilla/5.0(Windows；u；Windows NT 5.2美国；RV :1 . 9 . 2 . 3)Gecko/20100401 Firefox/3 . 6 . 3 GTBDFff gtb 7.0接受文本/html、应用程序/xhtml xml、应用程序/XML；q=0.9，*/*；q=0.8 Accept-语言zh-cn，en-us；q=0.7，en；q=0.3 Accept-Encoding gzip，deflate Accept-Charset ISO-8859-1，utf-8；q=0.7，*；q=0.7 keep-alive 115 proxy-connection keep-alive返回的响应头日期sat，2010年4月17日08:18336018 GMT过期-1缓存控制私有，最大年龄=0内容类型文本/html；charset=UTF-8 Set-Cookie PREF=ID=b94a 24 e8e 90a 0f 503360 NW=1: TM=12714922983360 lm=1271492298:s=jh7 cxsix 48 zoo8nn；到期=2012年4月16日星期一08:18:18格林尼治标准时间；路径=/；domain=. Google.com . hk NID=33=ejvylqbv2csgpxqtq 8 dlidt2jq 4 acae 9 ykku2x-H4 hvw _ atrgx7nja 69 uubmbzvhvnkaoe _ jlgzooxqacsfdp 1i 53 c8 hwjrtjd 0 vyttrnwhgygv 491 mngkt6cybvg；到期=孙，2010年10月17日08:18:18 GMT路径=/；domain=. Google.com . hk；Http仅内容编码gzip服务器GWS内容长度4344这里发送的请求头的大小约为420字节，这里返回的请求头约为600字节。可以看到，每个请求都会带来一些额外的信息进行传输(这个请求还没有带来cookie)。当请求的资源很小时，例如小于1k的图标，请求带来的数据可能大于实际图标的数据。所以请求多了，网络上传输的数据自然就多了，传输速度自然就慢了。实际上，请求带来的数据量仍然是一个小问题。毕竟，请求可以带来的数据量仍然有限。与请求头中的冗余数据相比，http连接的开销更严重。首先，看看从用户输入网址到将内容下载到客户端的各个阶段：1。域名解析2。正在打开TCP连接3。发送请求4。等待(主要包括网络延迟和服务器处理时间)5。下载资源很多人认为每个请求大部分都花在了下载资源上。我们来看一下blogjava资源下载的瀑布图(每个颜色代表的阶段对应以上五个阶段):。

你可能会惊讶地发现等待时间比实际下载时间长得多。上图告诉我们：1。花在每个请求上的大部分时间都在其他阶段，而不是资源下载阶段。2.即使是最小的资源在其他阶段仍然会花费大量时间，但是下载阶段会更短(见上图第六个资源，只有284字节)。我们应该如何优化上面提到的两种情况？减少请求数量，以降低其他阶段的成本和网络中传输的数据。如何减少请求数量1？合并文件合并文件就是把很多JS文件合并成一个文件，把很多CSS文件合并成一个文件。这种方法应该被很多人使用。这里就不详细介绍了，只推荐一个合并工具：由雅虎提供的yuiCompressor。2.http://developer.yahoo.com/yui/compressor/,合并图片这是使用css sprite通过控制背景图片的位置来显示不同的图片。这个技术大家也用过，就不详细介绍了。我推荐一个在线合并图片的网站。http://csssprites.com/3。将JS和CSS合并成一个文件。上面提到的第一种方法是将几个JS文件合并成一个JS文件，将几个CSS文件合并成一个CSS文件。如何将CSS和JS合并成一个文件？参见我的另一篇文章： http://www.blogjava.net/bearrui/archive/2010/04/18/combine _ CSS _ js . html 4 .使用Image maps Image maps是将多张图片组合成一张图片，然后使用html中的map标签连接图片，点击图片的不同区域执行不同的动作。参见：http://www.w3.org/TR/html401/struct/objects.html#h-13.6 5。数据嵌入图片这种方法将图片编码后直接嵌入到html中使用，这样可以减少HTTP请求，但是这样会增加HTML页面的大小，而且这样嵌入的图片无法缓存。见下图：上图是将图片用base64编码，用data:嵌入到html中。代码如下(后者省略，可以查看源代码):IMG SRC=' data : image/gif；Base64，/9j/4 aaqskzjrgabcayabgaad/4 qawrxhpzgaasuqaagaa . '在谷歌的视频搜索中，所有搜索到的视频缩略图都使用了内嵌图片，如下图：。

以上方法各有利弊，不同情况下可以选择不同的方式使用。例如，使用数据嵌入图片可以减少请求数量，但会增加页面大小。因此，微软必应搜索在用户第一次访问时使用数据嵌入图片，然后在后台加载真实图片，稍后访问时直接使用缓存图片而不是数据。【声明】请注明来源于：http://www.blogjava.net/BearRui/.禁止商业使用！