今天小编跟大家讲解下有关减少图片HTTP请求的方法分析 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关减少图片HTTP请求的方法分析 的相关资料，希望小伙伴们看了有所帮助。
代码如下： 复制代码代码如下: <div style="border: 2px ridge rgb(51, 51, 51); background-color: rgb(244, 245, 235); width: 200px; padding-top: 4px;"> <center> <a href="'Home')"title="Home"><img src="https://www.aidi.net.cn//css/images/home.gif"border="0"></a> <a href="'Gift')"title="Gift"><img src="https://www.aidi.net.cn//css/images/gift.gif"border="0"></a> <a href="'Cart')"title="Cart"><img src="https://www.aidi.net.cn//css/images/cart.gif"border="0"></a> <a href="'Settings')"title="Settings"><img src="https://www.aidi.net.cn//css/images/settings.gif"border="0"></a> <a href="'Help')"title="Help"><img src="https://www.aidi.net.cn//css/images/help.gif"border="0"></a> </center> </div> 注意：这五个按钮分别使用了五张图片 那么，五张图片就意味着你的该页面又多了五个HTTP请求，它将大大降低页面的呈现效率。增加的HTTP请求是导致页面性能下降的最大刽子手，所以我们应该尽量减少HTTP请求，而图片是增加HTTP请求的最大可能者，搞定它，事不宜迟！呵呵^_^ 下面列出了三种解决方案： 方案一：图片地图（图像热点）：它将用户的点击映射到一个操作，而无需向后端Web服务器发送任何请求。 代码如下： 复制代码代码如下: <div class="panel_div"style="border:2px ridge #333333;background-color:rgb(244, 245, 235);width:180px;padding:4px 0px 0px 2px;"> <img usemap="#mymap"src="https://www.aidi.net.cn//css/images/imagemap.gif"border="0"/> <map name="mymap"> <!-- img使用的map --> <area shape="rect"coords="0,0,31,31"href="'Home');"/> <area shape="rect"coords="36,0,66,31"href="'Gifts');"/> <area shape="rect"coords="71,0,101,31"href="'Cart')"/> <area shape="rect"coords="106,0,136,31"href="'Set')"/> <area shape="rect"coords="141,0,171,31"href="'Help')"/> </map> </div> 注意：这五个按钮其实是在一张图片中 方案二：CSS Sprites：使用这种方式也可以将五张图片合并为一张图片，并且更为灵活。 代码如下： 复制代码代码如下: <style> #navbar span { width:30px; height:31px; background-image:url(images/imagemap.gif); display:inline; float:left; } .home { background-position:0 0; margin-left:2px;} .gifts { background-position:-35px 0; margin-left:50px;} .cart { background-position:-70px 0; margin-left:120px;} </style> <div id="navbar"style="border: 2px ridge rgb(51, 51, 51); padding: 4px 0pt; background-color:#ff0; width: 300px; height: 32px;"> <a href="'Home')"title="Home"> <span class="home"></span></a> <!-- 注意：该span标签用来加载图片 --> <a href="'Gifts')"title="Gifts"> <span class="gifts"></span></a> <!-- 注意：该span标签用来加载图片 --> <a href="'Cart')"title="Cart"> <span class="cart"></span></a> <!-- 注意：该span标签用来加载图片 --> </div> 注意：在这个“CSS Sprites”中用到的图片就是“图片地图”中的同一张图片。（并特地只显示其中的三个图标） CSS Sprites的原理：只是定位到图片其中的一块区域，并显示在某个位置而已。 CSS Sprites的优点：通过只使用一个图片减少了HTTP请求，并且比“图片地图”更灵活。 很多人会误认为：合并的图片要比分离的图片的总和要大，因为合并的图片中包含有附加的空白区域。 实际上，合并的图片要比分离的图片的总和要小，这是因为它降低了图片自身的开销（颜色表、格式信息，等等）。 方案三：内联图片：通过使用data: URL模式在Web页面中包含图片，且无需任何额外的HTTP请求。（IE目前不支持） 1、内联图片的原理：允许将小块数据内联为‘立即数(immediate data)’，数据就包含在其URL自身之中。 2、内联图片的格式：data:[<mediatype>][;base64]，<data> 举例：一个内联图片可以定义为 <img src=http://xyrl.com/skin/7ke/image/nopic.gif>ta:image/gif;base64，asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33" > 其中“asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33”就是该图片的数据。 data: URL模式-> 基本用于内联图片，可以用在任何需要指定URL的地方，如：script和a标签中。 3、内联图片的缺陷： a> 不受IE的支持（IE7也如此）； b> 保存数据的大小上受限制（Firefox 1.5支持高达100KB的数据）； c> base64编码会增加其图片的大小； d> 在跨越不同页面时不会被缓存 （可以将内联图片作为背景图片保存在外部CSS样式表中来解决此问题，但会增加一个HTTP请求以换得数据被缓存的结果。）； 本人推荐：根据具体情况，使用方案一：图片地图（图像热点）或方案二：CSS Sprites。来源：爱蒂网
