实测图片的HTTP请求

所属分类: 网页制作 / 应用技巧 阅读数: 1481
收藏 0 赞 0 分享

请在主流浏览器中打开测试页面,在Fiddler里查看http请求。

1. 隐藏图片
<img src="1.jpg" style="display: none" />测试:test_1.html
结论:只有Opera不产生请求。
注意:用visibility: hidden隐藏图片时,在Opera下也会产生请求。

2. 重复图片
<img src="1.jpg" /><img src="1.jpg" />测试:test_2.html
结论:所有浏览器都只产生一次请求 。

3. 重复背景
<style type="text/css">    .test1 { background: url(1.jpg) }    .test2 { background: url(1.jpg) }</style><div class="test1">test1</div><div class="test2">test2</div>测试:test_3.html
结论:所有浏览器都只产生一次请求。

4. 不存在的元素的背景
<style type="text/css">    .test1 { background: url(1.jpg) }    .test2 { background: url(2.jpg) } /* 页面中没有class为test2的元素 */</style><div class="test1">test1</div>测试:test_4.html
结论:背景仅在应用的元素在页面中存在时,才会产生请求。这对CSS框架来说,很有意义。

5. 隐藏元素的背景
<style type="text/css">    .test1 { background: url(1.jpg); display: none; }    .test2 { background: url(2.jpg); visibility: hidden; }</style><div class="test1">test1</div>测试:test_5.html
结论:Opera和Firefox对于用display: none隐藏的元素背景,不会产生HTTP请求。仅当这些元素非display: none时,才会请求背景图片。

6. 多重背景
<style type="text/css">    .test1 { background: url(1.jpg); }    .test1 { background: url(2.jpg); }</style><div class="test1">test1</div>测试:test_6.html
结论:除了基于webkit渲染引擎的Safari和Chrome,其它浏览器只会请求一张背景图。
注意:webkit引擎浏览器对背景图都请求,是因为支持CSS3中的多背景图。

7. hover的背景加载
<style type="text/css">    a.test1 { background: url(1.jpg); }    a.test1:hover { background: url(2.jpg); }</style><a href="#" class="test1">test1</a>测试:test_7.html
结论:触发hover时,才会请求hover状态下的背景。这会造成闪烁,因此经常放在同一张背景图里通过翻转来实现。
注意:在图片no-cache的情况下,IE每次hover状态改变时,都会产生一次新请求。很糟糕。
2009-05-13晚补充:上面的解释有误,更详细的解释请参考续篇。翻转技巧指的是Sprite技术,例子:test_7b.html, 在ie6下不会产生闪烁。

8. JS里innerHTML中的图片
<script type="text/javascript">    var el = document.createElement('div');    el.innerHTML = '<img src="1.jpg" />';    //document.body.appendChild(el);</script>测试:test_8.html
结论:只有Opera不会马上请求图片。
注意:当添加到DOM树上时,Opera才会发送请求。

9. 图片预加载
最常用的是JS方案:

复制代码
代码如下:

<script type="text/javascript"> new Image().src = '1.jpg'; new Image().src = '2.jpg';</script>在无JS支持的环境下,可以采用隐藏元素来预加载:
<img src="1.jpg" style="visibility: hidden; height: 0; width: 0" />测试:test_9.html

终于到总结了

1.对于隐藏图片和隐藏元素的背景,Opera不会产生请求。
2.对于隐藏元素的背景,Firefox也不会产生请求。
3.对于尚未插入DOM树的img元素,Opera不会产生请求。
4.基于webkit引擎的Safari和Chrome,支持多背景图。
5.其它情景,所有主流浏览器保持一致。
对图片请求的处理上,个人觉得Opera走在前列。

番外

1. 用Fiddler监控Opera时,如果是本地服务器,需要在Opera的代理服务器设置里,将本地服务器勾选上。

2. 查看HTTP请求数,还有一个万无一失的方法是,直接查看Apache的access.log文件。

3. 我的Firefox对于重复图片和重复背景,会产生重复请求。禁用了所有扩展,问题依旧。有知详情者,还望告知。

更多精彩内容其他人还在看

sitemesh教程-页面装饰技术原理及应用

Sitemesh是一种页面装饰技术:它通过过滤器(filter)来拦截页面访问,据被访问页面的URL找到合适的装饰模板等等,感兴趣的朋友可以了解下哦
收藏 0 赞 0 分享

浏览器可以注册的事件小结

我们在网页制作中经常会用到浏览器事件,这里简单的整理下方便需要的朋友
收藏 0 赞 0 分享

从image/x-png谈ContentType(s)

今天在做一个文件上传的功能的时候,发现我总是上传不了png的图片。经过调试发现,应该是在ContentType的地方判断失误了。后来百度了一下发现一个有意思的现象,我发现png的图片的ContentType并不是我在注册表中看到的image/png,而是image/x-png
收藏 0 赞 0 分享

窗口中的各种距离/滚动距离的精确计算汇总

平时在项目开发中,没少跟边距,位置,坐标什么的打交道,悲剧的是,如果你对这些东西没有非常清晰的概念,编码的时候会非常痛苦,到处找资料寻求距离的精确计算,接下来本文提供一个示意他,希望对你有帮助
收藏 0 赞 0 分享

web的各种前端打印方法之CSS控制网页打印样式

使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措,接下来介绍CSS控制网页打印样式是如何实现的
收藏 0 赞 0 分享

响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

现在移动设备越来越普及,用户使用智能手机、pad上网页越来越普遍,但是传统的fix型的页面在移动终端上无法很好的显示。因此,Ethan Marcotte提出一种响应式web设计的概念,响应式web设计的英文为Responsive Web Design,简写为RWD,感兴趣的朋友可
收藏 0 赞 0 分享

响应式WEB设计学习(2)—视频能够做成响应式吗

除了图片以外,还有一种常见的多媒体形式是视频。有时在web设计中,根据需要会在页面中加入视频,视频大小的自适应单靠CSS本身似乎是做不到的,感兴趣的朋友可以详细了解下
收藏 0 赞 0 分享

响应式WEB设计学习(3)—如何改善移动设备网页的性能

究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢?这些元素应该做何处理以提升页面在移动设备中的整体性能?是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢?带着这些疑问开始本文之旅吧
收藏 0 赞 0 分享

网页设计必备手册 216网页安全色大全

网页安全色是指在不同硬件环境、不同操作系统和不同浏览器中都能够正常显示的颜色集合(调色板或者色谱),也就是说这些颜色在任何终端用户的显示设备上都是相同的效果
收藏 0 赞 0 分享

网页设计中设计出有层次感的界面的经验介绍

很多网友常说自己的网站为什么色彩上总是有问题,总是看起来没什么精神,没办法吸引人注意。观察了一些网友们设计的网站发现他们在用色上不够大胆,同时也缺乏对色彩层次的理解。
收藏 0 赞 0 分享
查看更多