HTTP请求数对于中小型网站来讲没什么要求了，因为你浏览就这么多了，如果像百度，新浪这类网站你会发现他们在css都会使用sprite来操作，下面我们一起来看看。
减少HTTP请求数对seo/seo.html" target="_blank">网站优化来说是非常重要的，过多的HTTP请求不仅会让用户等待时间变长，而且还会加重服务器的负担。减少HTTP请求主要有以下技术手段。
①图片映射，利用HTML的Map标签将一张图片对应不同链接。
②CSS sprite，国内又叫CSS精灵，或者融图。是将若干个图片融到一张大图中，以减少HTTP请求。
③静态资源合并，将css和javascript等静态资源合并到一个文件并进行压缩。
④静态资源缓存，用户访问一次后不再请求静态资源
1.图片映射
图片映射，就是HTML的热图，指带有可点击区域的一张图片。如下所示代码（来自w3school），将一幅图分割成三个不同的点击区域。
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
图片映射的好处显而易见，如果不适用图片映射的话，你至少得切割成三张图，浏览器分三次请求。
2.CSS sprite
CSS sprite又叫css精灵，是将多张小图融合到一张大图，从而减少HTTP请求数量的方式，比如最常见的各种分享按钮（新浪微博、QQ空间、腾讯微博、人人网等），如果每个按钮都是一张单独的图片，那十几个SNS网站就得十几个小图标，而如果采用CSS sprite，则可以将这十几个图标融为一张图，仅需一次网络请求。这是CSS sprite最明显的好处。
CSS sprite的原理是利用CSS的background-image、background-repeat、background-position这几个属性的组合进行背景定位，background-position可以用x、y值精确的定位出背景图片的位置。
3.静态资源合并压缩
通常情况下我们会写很多css和js代码，而为了便于维护我们可能会将不同的功能模块写入不同的css/js文件，在发布之前我们可以将这些文件合并成一个css或js文件，并对这个文件压缩，这样浏览器请求只需要一次即可加载完所有的css/js文件。当然如果这些文件应用场景差异很大，你也就没必要将他们合并到一个文件。
合并压缩你可以使用Yahoo的YUI compressor或者Google的Closure Compiler。
4.对静态资源文件进行缓存
这个好处显而易见，就不用多说了，最好对静态资源采用不同的域名和HTTP服务器，并且对静态资源设置浏览器缓存为永久（足够长时间，比如淘宝图片CDN就是10年过期），设置方法为给HTTP头设置过期时间，比如nginx服务器可以这样设置：
location ~* .(ico|gif|bmp|jpg|jpeg|png|swf|js|css|mp3) {
root/data/www/static;
expires max;
}
当然，设置静态资源过期也要根据自身的情况，我一般的做法是全部设置为永久缓存。然后每次更新图片或动画都不会用原路径，而是重新生成新的路径。每次css和js更新后加入时间戳，比如http://xxcdn.cn/xx/xx/xx.js?t=20131209
先看百度实例，打开百度我们查看源码 大家会发现所有的css,js都写在了一个页面，如果我们使用站长工具查会发现百度图片,js缓存是永久的了，这个大家会明白为什么吗，还有我们发现在图片中百度这样定了
js代码如下全写在一起了
<script>setTimeout(function(){var s = document.createElement("script");s.charset="utf-8";s.src="http://s1.bdstatic.com/r/www/cache/static/global/js/popup_a3186328.js";document.body.appendChild(s);},0);</script></html><script>(function(){var C=G("lm").getElementsByTagName("A");for(var B=0,A=C.length;B<A;B++){var D=C[B];addEV(D,"mousedown",(function(E,F){return .....(window);</script>
在css中也发现全写在了页面中了并且重点是图片直接如下
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAMAAACuX0YVAAAABlBMVEVnpv85i/9PO5r4AAAAD0lEQVR42gEEAPv/AAAAAQAFAAIros7PAAAAAElFTkSuQmCC);
这个我们放在html会发现是一张图片了，这也是一种办法了。
