您现在的位置是：网站首页> 编程资料编程资料
减少图片HTTP请求的方法分析 _CSS教程_CSS_网页制作_
2021-09-08
807人已围观
简介 当一个页面的图片在没有使用任何方案的情况下，五个图片超链接就只能使用五个图标按钮。
代码如下：
注意：这五个按钮分别使用了五张图片
那么，五张图片就意味着你的该页面又多了五个HTTP请求，它将大大降低页面的呈现效率。增加的HTTP请求是导致页面性能下降的最大刽子手，所以我们应该尽量减少HTTP请求，而图片是增加HTTP请求的最大可能者，搞定它，事不宜迟！呵呵^_^
下面列出了三种解决方案：
方案一：图片地图（图像热点）：它将用户的点击映射到一个操作，而无需向后端Web服务器发送任何请求。
代码如下：
注意：这五个按钮其实是在一张图片中
方案二：CSS Sprites：使用这种方式也可以将五张图片合并为一张图片，并且更为灵活。
代码如下：
注意：在这个“CSS Sprites”中用到的图片就是“图片地图”中的同一张图片。（并特地只显示其中的三个图标）
CSS Sprites的原理：只是定位到图片其中的一块区域，并显示在某个位置而已。
CSS Sprites的优点：通过只使用一个图片减少了HTTP请求，并且比“图片地图”更灵活。
很多人会误认为：合并的图片要比分离的图片的总和要大，因为合并的图片中包含有附加的空白区域。
实际上，合并的图片要比分离的图片的总和要小，这是因为它降低了图片自身的开销（颜色表、格式信息，等等）。
方案三：内联图片：通过使用data: URL模式在Web页面中包含图片，且无需任何额外的HTTP请求。（IE目前不支持）
1、内联图片的原理：允许将小块数据内联为‘立即数(immediate data)’，数据就包含在其URL自身之中。
2、内联图片的格式：data:[][;base64]，
举例：一个内联图片可以定义为
其中“asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33”就是该图片的数据。
data: URL模式-> 基本用于内联图片，可以用在任何需要指定URL的地方，如：script和a标签中。
3、内联图片的缺陷：
a> 不受IE的支持（IE7也如此）；
b> 保存数据的大小上受限制（Firefox 1.5支持高达100KB的数据）；
c> Base64编码会增加其图片的大小；
d> 在跨越不同页面时不会被缓存
（可以将内联图片作为背景图片保存在外部CSS样式表中来解决此问题，但会增加一个HTTP请求以换得数据被缓存的结果。）；
本人推荐：根据具体情况，使用方案一：图片地图（图像热点）或方案二：CSS Sprites。
复制代码
代码如下:注意：这五个按钮分别使用了五张图片
那么，五张图片就意味着你的该页面又多了五个HTTP请求，它将大大降低页面的呈现效率。增加的HTTP请求是导致页面性能下降的最大刽子手，所以我们应该尽量减少HTTP请求，而图片是增加HTTP请求的最大可能者，搞定它，事不宜迟！呵呵^_^
下面列出了三种解决方案：
方案一：图片地图（图像热点）：它将用户的点击映射到一个操作，而无需向后端Web服务器发送任何请求。
代码如下：
复制代码
代码如下:注意：这五个按钮其实是在一张图片中
方案二：CSS Sprites：使用这种方式也可以将五张图片合并为一张图片，并且更为灵活。
代码如下：
复制代码
代码如下:注意：在这个“CSS Sprites”中用到的图片就是“图片地图”中的同一张图片。（并特地只显示其中的三个图标）
CSS Sprites的原理：只是定位到图片其中的一块区域，并显示在某个位置而已。
CSS Sprites的优点：通过只使用一个图片减少了HTTP请求，并且比“图片地图”更灵活。
很多人会误认为：合并的图片要比分离的图片的总和要大，因为合并的图片中包含有附加的空白区域。
实际上，合并的图片要比分离的图片的总和要小，这是因为它降低了图片自身的开销（颜色表、格式信息，等等）。
方案三：内联图片：通过使用data: URL模式在Web页面中包含图片，且无需任何额外的HTTP请求。（IE目前不支持）
1、内联图片的原理：允许将小块数据内联为‘立即数(immediate data)’，数据就包含在其URL自身之中。
2、内联图片的格式：data:[
举例：一个内联图片可以定义为
其中“asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33”就是该图片的数据。
data: URL模式-> 基本用于内联图片，可以用在任何需要指定URL的地方，如：script和a标签中。
3、内联图片的缺陷：
a> 不受IE的支持（IE7也如此）；
b> 保存数据的大小上受限制（Firefox 1.5支持高达100KB的数据）；
c> Base64编码会增加其图片的大小；
d> 在跨越不同页面时不会被缓存
（可以将内联图片作为背景图片保存在外部CSS样式表中来解决此问题，但会增加一个HTTP请求以换得数据被缓存的结果。）；
本人推荐：根据具体情况，使用方案一：图片地图（图像热点）或方案二：CSS Sprites。
相关内容
- 基于firebug的firefox扩展 css usage_浏览器兼容教程_CSS_网页制作_
- CSS和“★”字符制做的中国国旗实现代码_CSS教程_CSS_网页制作_
- 优秀的CSS 框架整理_CSS教程_CSS_网页制作_
- 百度有啊 CSS圆角实现代码_CSS教程_CSS_网页制作_
- CSS 很酷的透明样式_CSS教程_CSS_网页制作_
- CSS 半透明度设置归纳总结[Firefox,IE,Chrome,Safari]_浏览器兼容教程_CSS_网页制作_
- 21个神奇的CSS技巧_CSS教程_CSS_网页制作_
- css gorush 状态栏不显示链接地址 _CSS教程_CSS_网页制作_
- CSS Hack 浏览器兼容整理 _浏览器兼容教程_CSS_网页制作_
- CSS3 倾斜的网页图片库实例教程_css3_CSS_网页制作_
