web前端优化-减少http请求

提供了几个优化方法来减少http请求的数量。

 

1.图片地图(Image Maps)

这种其它就是比较菜单栏。如果可以的话，把所有图片做成一个图片，再使用图片热点进来链接转跳。

这样就可原来的几次http请求变为一次了。。

缺点:在定义图片地图上的区域坐标时，如果采取手工的方式则很难完成且容易出错，而且除了矩形之

外几乎无法定义其他形状，通过DHTML创建的图片地图则在IE中无法工作.

 

2.css Sprites

原理是和图片地图一样的，css sprites也可以合并图片，但更为灵活。需要将多个图片合并到一个单

独的图图片中。

<div style="background-image: url('a.gif'); background-position:-260px -90px; width:26px;height:24px;>
</div>

 

如果需要在页面中为背景，按钮，提供大量图片，这种方案-干净的标签，很少的图片和很短的响应时间。

 

3.内联图片(inline images)

通过使用data:URL模式可以在Web页面中包含图片但无需任何额外的HTTP请求。(IE不支持,这种基本没什么用处)

<img src="https://img-blog.csdnimg.cn/2022010619580836000.gif">

还有一个缺点就是大小限制。Firefox最多支持100k的内联图片.

 

4.合并脚本和样式表

样式一般1到2个。脚本也尽量合并成几个。这样来减少http请求.