【Web优化】Yslow优化法则（一）最小化HTTP请求数。

Yahoo提出的前端优化的最佳实践，称为YSLOW优化法则。主要包括七个类别的优化：

内容（content）、服务器端、Cookie、CSS、JavaScript、image和mobile（主要针对移动端），包含了35条优化和加速的经验法则。

一、减少HTTP请求

    一次web访问的过程实际上就是一系列请求-响应的过程，其中会涉及TCP/IP握手、连接等过程(由于HTTP的无状态型，意味着每次请求都需要建立连接)。在Firefox浏览器中，通过firebug等调试工具，可以清晰的看到页面加载中的HTTP请求和请求的时间轴，进而分析web站点的性能。下图展示了加载一个页面需要的HTTP请求。可以看出，其中有一条HTTP请求的时间达到了8s以上，如果该资源对于页面渲染是必须的，那么页面的渲染必定要等到该资源加载完成才能开始，这毫无疑问会导致糟糕的用户体验。

在Firebug网络tab的下方，还会给出页面加载所需要的总的HTTP请求数和请求资源的总大小：

 

    YSLOW法则指出：用户的响应时间的80%花费在前端，其中最主要的部分用在下载文档中的图片、js、css、flash等资源上。相对于页面渲染，HTTP请求的开销是较大的。而且对于浏览器而言，同一域名下并发连接数有一定的限制。这意味着，如果一个页面的HTTP请求太多，由于浏览器无法并发下载多个资源，只好以类似串行的方式下载（实际上不是串行，而是并发数较低），因此在一定程度上加大了页面的响应时间。关于浏览器的并发连接，可以参考这篇文章  （http://www.iefans.net/liulanqi-zuida-bingfa-lianjieshu/）

         减少HTTP请求数的方式有：

1.      合并文件。用于将web中分散的js,css等文件的合并，通过减少外部引用文件的个数来减少页面加载的HTTP请求数。

2.      CSS sprite。一种处理方式。它允许你将页面中的多个小的图片合并为一张大的图片，然后通过css的background-position定位需要的位置。这种处理方式比较普遍，几乎所有的优秀站点都是使用这种方式，减少分散在页面中各个图片的HTTP请求数。例如，百度贴吧中的图片素材，都是合并成这样一张大图：

（http://cdn.iknow.bdimg.com/static/common/pkg/common_z_63fa369.png），然后通过css定位来确定背景图片的。在css中。通过background-position可以定位背景图片的位置。一般而言，CSS Sprite技术多用于页面中的背景图片，对于其他大的单独的图片（如图片展示系统，一般不使用该技术）。CSS Sprite技术还有其他的优点，更多的可以查看：http://baike.baidu.com/link?url=w7-ZuNVNQ7KmXeM-n3owgotI8dkLOqHAl9s2Nrwr5xl8HfVjKgXMAKGe53Ow1M5wxe-PqJLrLtW_wWIYQTOh0q

http://alistapart.com/article/sprites（推荐）

3.      Image Maps。由于并不是推荐的方案，且并不是所有浏览器都支持。所以这里不再赘述。

4.      Inline Image。使用 data: URL scheme 的方式将图片的二进制数据植入到css文件中。例如，在firefox浏览器的新开默认tab页中，就是使用inline image的方式：url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFYAAADhCAYAAABSmUI6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/Ii……………………..”)

其中的关键字:image/png表明图片的MIME类型，而base64则是指图片数据的编码压缩方式，这里是base64算法。后面的一长串序列则是该图片的数据流。需要注意的是，这种方式有一定的限制，例如不超过1024字节，且没有得到浏览器的广泛支持。

近年来由于带宽条件的不断改善和硬件成本的降低，以及cache和分布式集群等技术的成熟，似乎单一层面的性能优化已经显得不那么重要，尤其是面对成百上千的分布式集群，降低HTTP的连接数似乎也不会给加载速度带来质的飞跃。但是，对于大企业而言，降低HTTP请求数意味着降低流量消耗，而当用户是亿级别的时候，即使单一的流量页面降低1个B的大小，也会节约相当可观的成本。毕竟，对于大公司而言，byte is money。

参考文献：

1.      https://developer.yahoo.com/performance/rules.html#num_http

2.      http://www.w3.org/TR/html401/struct/objects.html#h-13.6

3.      http://tools.ietf.org/html/rfc2397

4.      http://alistapart.com/article/sprites

5.      http://baike.baidu.com/link?url=w7-ZuNVNQ7KmXeM-n3owgotI8dkLOqHAl9s2Nrwr5xl8HfVjKgXMAKGe53Ow1M5wxe-PqJLrLtW_wWIYQTOh0q

6.      http://www.cnblogs.com/flyingchen/archive/2009/09/03/1559945.html

7.      http://www.iefans.net/liulanqi-zuida-bingfa-lianjieshu/

8.      http://www.iefans.net/qingqiu-bingfa-lianjieshu-xianzhi/

9.      http://www.iefans.net/bingfa-lianjieshu-sudu-ceshi/