尽量减少HTTP请求次数

尽量减少HTTP请求次数

终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少 HTTP请求的次数。这是提高网页速度的关键步骤。
减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。
合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。

1. CSS Sprites是减少图像请求的有效方法。

     把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和 background-position属性来显示图片的不同部分；

      把所有背景图都集成在一张图片上，减少图片服务器请求次数

    好象现在越来越流行这种玩法了，原来大家都是把背景切成单个小图片，要用背景的时候一个个定义，这样页面打开的时候，也会加载各个小图片，但是这种办法把所有小图片都集中在一张图中，定义背景时用坐标定位，再结合高度，宽度限制等手段，过到相同的效果，好处是:虽然下载的总K数不会有明显变化，但是图片的请求次数却明显减少了。

    废话不说，直接看代码吧:

<style type="text/css">
.bg1{background:url(bg_v.png) no-repeat 0 0;padding-left:20px;}
.bg2{background:url(bg_v.png) no-repeat 0 -20px;padding-left:20px;}
.bg3{background:url(bg_v.png) no-repeat 0 -40px;padding-left:20px;}
.bg4{background:url(bg_v.png) no-repeat 0 -60px;padding-left:20px;}
.bg5{background:url(bg_v.png) no-repeat 0 -80px;padding-left:20px;}
</style>
<a href="#" class="bg1">bg1</a>
<a href="#" class="bg2">bg2</a>
<a href="#" class="bg3">bg3</a>
<a href="#" class="bg4">bg4</a>
<a href="#" class="bg5">bg5</a>
<br /><br />
<img src="bg_v.png" />

效果图：

 图片地图是把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在 一起的时候才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；
内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。
减少页面的HTTP请求次数是你首先要做的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage – Exposed!中所说，HTTP请求在无缓存情况下占去了40%到60%的响应时间。让那些初次访问你网站的人获得更加快速的体验吧！