如何减少网站的http连接数

减少http不仅可以降低服务器的负载，提高网站打开速度，还可以让源码更易读易懂。

通常减少http的做法有三：

第一：将css文件和js文件放到单独的.css和.js文件中。

 

当浏览者浏览页面以后，客户端浏览器缓存会存储css文件和js文件，这样当次访问者再次访问网页将直接从客户端内存中读取这两个文件。而嵌在网页中的js代码和css代码却不能被缓存。

 

第二：减少iframe使用。

 

一个iframe跟一个单独的页面本质上没有区别，客户端在访问时需要另行建立一个HTTP连接进行访问，就好比你同时访问了N+1个网页。

 

第三：合并背景图片。  典型案例：淘宝网

 

合并背景图片就是，把页面上所有的背景小图片，合并到一张大图片上面。再通过css的background-position控制要显示整个图片中的哪一小块区域。原本每张背景图片需要建立一个HTTP请求，现在只需要一次就OK，节约了N-1次HTTP请求。

操作代码：

1. background-image:url(总背景图片的url);  
2. background-repeat:no-repeat;  
3. background-postion-x:5px;  

4. background-position-y:-50px; 

其中postion-x, -y 横竖坐标定位背景图片区域。

根据当前要显示的小图片在总背景图片中的位置决定x、y。其中-50的表示图片左上角的纵坐标的位置减去50个像素。

更多

在对大访问量网站进行性能优化时，其中有一点是尽量减少http连接数，道理很明了，减少了单个PV的http连接数，肯定可以增加单台服务器的用户负载数。

减少Http连接数的具体方法是减少没必要的iframe使用，合并js文件，css文件，和一种常见的方法，合并Css小背景图，合并Css小背景图这一点已经有很多大网站都在做了，比如淘宝，百度贴吧，他们页面上看似有很多小的背景图片，而实际上这些图片都被合并成了一张大图，然后用Css的Background-positioin属性控制显示背景图片的位置。这一点是很有效的，例如百度贴吧的一张背景图如下

大家可以看到，百度的技术人员把n张小图合并到了一张图片上，而通过css控制在页面上单独显示每一个小图。这样每一个用户访问就相当于减少了n-1个http连接数，这对于访问量大的网站来说，吞吐量的提升是显而易见的。
具体的Css是这样的，以下面的页面显示的红框部分为例，和上面的大图对比，我们可以看到下面显示的小图片其实就是上面大背景图的倒数第4个图片，具体的css代码如下（可以通过firefox安装firebug插件或者通过个google浏览器查看元素的css）

background-image: url(http://tieba.baidu.com/tb/cms/img/index/sprites.png);
background-repeat: no-repeat;
background-position-x: 7px;
background-position-y: -253px;

其关键代码在于background-position-y，这里是负值，表示背景图的左上角的纵坐标值x减去背景开始显示的位置的纵坐标。

这个优化方式很好，但是做起来却比较费事，做出小图后需要把小图整合到一张大图上，然后再调整css中的背景位置。鉴于此，我做了一个生成工具---Css背景图合并工具，可以帮助大家完成整合小图，并生成对应css和html测试文档的工作，如下截屏： 
可以调整小图横排还是纵排，选中下图可以生成该小图所在位置的css，css可以根据需要自己调整。
最后可以生成测试文件，测试文件中包括整合后的大图，这些小图对应的所有css，和Html测试文件，如下生成的html文件截屏。
 

希望此工具可以给大家带去方便。

附最新的源文件，可执行文件。欢迎大家使用，反馈。(使用此工具需要安装微软的dot net framework 2.0)