网站优化之减少HTTP请求

原贴:http://lovelaozang.cn/show-6786-1.html

网站优化之减少HTTP请求

Submitted by 老臧 on 2009, January 12, 11:37 PM. 好好学习 相关文章 评论

　　今天给大家分享一些网站优化的一些经验，如有不对的地方欢迎批评指正或与我讨论。关于网站优化，可以从多个方面说起，比如在网站制作过程中、在服务器架设中。关于HTTP请求，在这里就不多说了，可以到在网上搜一下，了解一下。今天主要说一下从图片地图、CSS Sprites、合并脚本和CSS这三个方面来减少HTTP请求。

　　现在介绍几个常用的减少HTTP请求方法：

１、图片地图

举个简单的例子，方便理解：

 

　　这是我随便的弄了一张图，在上面的Mozilla Firefox我将地A地址链接到了，相应的一个地址。将下面的Navicat 部分链接到了另外一下地址，可以看一下这块所利用的源代码。

 

XML/HTML代码

1. <img height="153" width="75" src="http://lovelaozang.cn/uploads//date_200901/0c93907f87b99831b61b5046eea05220.jpg" alt="" usemap="#Map" />  
2. <map id="Map" name="Map">  
3. <area href="http://lovelaozang.cn/show-6740-1.html" coords="5,2,65,65" shape="rect" />  
4. <area href="http://lovelaozang.cn/show-581-1.html" coords="35,108,31" shape="circle" /> </map>  

 

利用一张图片链接到了多少地址，此时你可能会有疑问：图片放在一起不变大了吗？是的，的确是大了。但根据测试，获取图片地址的时间比获取为每个图片使用分离的超链接时间快56%。

２、CSS Sprites

　　跟图片类似，CSS Sprites也是可以合并图片的，一起来分析一下六间房主页所写的部分CSS

 

CSS代码

1. .fontHeader .more a,.idxSideBox .more a ,#hostFav .more a {float:rightright;padding-right:12px;background-position: rightright -395px !important;background:url(http://r.6.cn/imges/new_6/idx_v5.png) no-repeat rightright -396px;color:#FD3337;  
2. }  

 

下面是此段CSS所调用的图片

http://r.6.cn/imges/new_6/idx_v5.png

说一下这样做的优点：通过合并图片的方式，减少了HTTP请求，降低了下载量。也许会有为类似上面的疑问，再做一下补充，这样做实际上，合并后的图片会比分离的图片的总和要小，这是因为它降低了图片自身的开销[如颜色表、格式信息，等等]

３、合并脚本和CSS

这个像在编程的过程中所用的到公共类一样，也举个例子：北京的交通大家都知道，不管有车没车都是堵。在这里也号召一下大家多乘用公共交通工具。网站 也是如此，多用共用js和CSS做到的不仅仅是减少了HTTP请求，还美化了自己的代码。何乐而不为呢？具体怎么去写，就要靠在平常的代码管理与敲的过程 中去提升了。

　　这些只是减少HTTP请求的一些简单方法，只是起一个抛砖引玉的效果，没有做不到，只有想不到哦！欢迎大家经验的分享与交流。

如需转载，请注明：转载自 老臧's blog [ http://lovelaozang.cn/show-6786-1.html ]

图片附件:

Tags: 网站优化, 网站架构