高性能网站法则--减少HTTP请求数

提高网站性能，最为重要的一点就是减少HTTP请求数。

1）为什么？

每个HTTP请求都会有overhead，如下图所示：

这是用HTTPWatch能够看到的一个HTTP请求，通常会包括DNS查找，建立连接，等待服务器响应和文件传输。除去文件传输花费的时间，其他的损耗都是overhead，所以减少HTTP请求就意味减少了不必要的overhead，就可以提高网站访问速度。

2）怎么做？

减少HTTP请求有很多种方法，很多时候都需要根据自己网站实现选择合适的方法。

1. 去除无用的和重复的资源

对于一个复杂的项目，在一个页面里面会有很多没有用的CSS或者JS文件，所以需要开发者能够自己做好code review，去掉不必要的资源引用。

有时候，一个页面是由很多个模块构成，而不同的模块又是由不同的开发人员合作完成。这个时候，出现重复的资源引用就在所难免，通常好的做法是能够将资源引用的代码集中起来，这样可以方便发现重复的资源。

2. 合并资源文件

JavaScript和CSS文件都可以很方便的合并。例如下面这个例子：

<script src=”a.js”/>

<script src=”b.js”/>

<script src=”c.js”/>

将a.js，b.js和c.js合并成all.js，资源引用就变成如下：

<script src=”all.js”>

通过资源文件的合并，可以很容易的实现建设HTTP请求。但如果这个合并的步骤是人工来做，则往往会带来额外的工作。现在有一些自动化的方式，分别在build阶段和运行时阶段。

build阶段：可以通过xml来定义一些需要合并的资源文件，然后通过ant来合并它们

运行时阶段：

mod_concate: 一个apache服务器的模块，可以自动合并HTTP请求

packtag: jsp taglib，可以很方便地合并压缩资源文件

3. 合并背景图片

这个技术叫做CSS Sprite。简单的说就是把零散的背景图片都合并成一个大的背景图片，如下图：

然后通过CSS的position来定位具体需要的背景图片。有一个很不错的工具可以帮助实现背景图片的合并和CSS文件的生成：spriteme

4. 背景图片内嵌 (CSS embed)

对于Firefox和IE8，都可以使用data:uri的方式来内嵌背景图片。

#myid {

background-image: url(“a.png");

}

内嵌后：

#myid {

background-image: url("data:image/png;base64,iVBORw0[...snip...]");

}

通过这种方式可以减少获取背景图片的HTTP请求。同样的，有个不错的工具能做自动的转换：cssembed

其实还有很多其他的方法，例如资源的Lazy loading来减少页面在初始化时的开销。这些方法都是非常不错的方法，最为关键的是如何能够结合网站实现的具体情况来实现这些方法。让我们减少HTTP请求，获得高性能的网站。