实测照片的HTTP恳求

日期:2020-12-14 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

请在流行访问器中开启检测网页页面,在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
结果:全部访问器都只造成1次恳求 。

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
结果:全部访问器都只造成1次恳求。

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
结果:除根据webkit3D渲染模块的Safari和Chrome,其它访问器只会恳求1张情况图。
留意: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情况下的情况。这会导致闪动,因而常常放在同1张情况图里根据旋转来完成。
留意:在照片no-cache的状况下,IE每次hover情况更改时,都会造成1次新恳求。很不尽人意。
2009-05⑴3晚填补:上面的解释有误,更详尽的解释请参照续集。旋转技能指的是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.其它场景,全部流行访问器维持1致。
对照片恳求的解决上,本人感觉Opera走在前列。

番外

1. 用Fiddler监管Opera时,假如是当地服务器,必须在Opera的代理商服务器设定里,将当地服务器勾选上。

2. 查询HTTP恳求数,也有1个万无1失的方式是,立即查询Apache的access.log文档。

3. 我的Firefox针对反复照片和反复情况,会造成反复恳求。禁用了全部拓展,难题依然。有知详细信息者,还望告之。