JS魔法堂:IMG元素加载行为详解

页面导航:首页 > 网络编程 > JavaScript > JS魔法堂:IMG元素加载行为详解

JS魔法堂:IMG元素加载行为详解

来源: 作者: 时间:2016-02-05 11:06 【

一、前言 在《JS魔法堂:jsDeferred源码剖析》中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入
一、前言                            
 
  在《JS魔法堂:jsDeferred剖析》中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨。
 
 
 
二、资源加载的相关属性和事件                  
 
  资源加载首先当然是确定资源位置的 src属性 、随之就是资源加载成功与否的 onload事件 和 onerror事件 ,对于IE5~10来说还多了一个 onreadystatechage事件 和与该事件相关联的 readyState属性 和 complete属性 。
 
   onload事件 ,当资源加载完成并成功解析后触发(若加载的不是image/*类型的资源,则解析失败)。
 
   onerror事件 ,当找不到资源或解析失败后触发。
 
   onreadystatechange事件 ,在onload事件后触发。
 
   readyState属性 ,用于表示IMG元素当前的资源装载状态,默认值为"uninitialized",onload事件触发后变为"complete"(onload事件处理函数运行时,readyState依然为"uninitialized")。
 
   complete属性 ,用于表示IMG元素的资源是否成功解析。默认为false,,onload事件触发后变为true(onload事件处理函数运行时,readyState依然为false)。
 
   src属性 ,用于指定资源位置URI。常见的URI格式为 http://..... 、 https://... 、 javascript:... 和 data:image/*,... 。而不同的对不同的URI支持程度和行为均有所差异。关于URI的资讯可以参考:URI Scheme、Uniform resource identifier。
 
 
 
三、实验开始                          
 
  本次实验将创建 img元素 并对其的 src属性 分别赋予以下内容 fsjohnhuang.png 、 :0 、 空字符串 、 空白字符串 、 //:0 、 javascript:void 0 和 data:image/png,foo ,并订阅img元素的onload和onerror事件,IE5~10下还订阅了onreadystatechange事件,统计整理其在IE5~11、Chrome和FF下的行为特点和事件响应延时。具体实验统计如下:
 
  测试环境:
 
  1.测试页面地址为http://localhost:9000/test.html
 
    2. 图片fsjohnhuang.png的大小为12KB
 
  符号说明:
 
     N/A 表示该列事件不触发。
 
src属性值 备注 Chrome FireFox IE5~11
onload事件 onerror事件 备注 onload事件 onerror事件 备注 onload事件 onerror事件
IE5~10
 
on
 
ready
 
state
 
change
 
备注
fsjohnhuang.png
有效URI,
 
URI自动补全为
 
http://localhost
 
:9000/fsjohnhu
 
ang.png
 
首次请求延时为2~5ms N/A
1.发起资源请求;
 
2.由于对资源进行缓存,后续对同一资源的请求,延时为0~1ms
 
首次请求延时为4~10ms N/A
1.发起资源请求;
 
2.由于对资源进行缓存,后续对同一资源的请求,延时为0~1ms
 
首次请求延时为3~9ms N/A 发生在onload事件之后
1.发起资源请求;
 
2.由于对资源进行缓存,后续对同一资源的请求,延时为0~1ms
 
:0
无效URI,
 
URI自动补全为http://localhost
 
:9000/:0
 
若IMG元素
 
在渲染树中,
 
则会显示加载
 
失败的示意图。
 
N/A 延时为5~300+ms 1.发起资源请求 N/A 延时为16~60ms 1.发起资源请求 N/A 首次请求延时为16ms左右 N/A
1.发起资源请求;
 
2.由于对资源进行缓存,后续对同一资源的请求,延时为0~1ms
 
空字符串,"" 无效URI N/A 延时为0~1ms
1.不发起资源请求;
 
2. 若IMG元素在渲染树中,不显示加载失败的示意图。
 
N/A N/A
1.不发起资源请求;
 
2. 若IMG元素在渲染树中,显示加载失败的示意图。
 
N/A 延时为0~1ms N/A
1.不发起资源请求;
 
2. 若IMG元素在渲染树中,不显示加载失败的示意图。
 
空白字符串,"    " 无效URI N/A 延时为0~1ms
1.不发起资源请求;
 
2. 若IMG元素在渲染树中,不显示加载失败的示意图。
 
N/A 延时为16~60ms
1.发起资源请求;
 
2. 若IMG元素在渲染树中,显示加载失败的示意图。
 
N/A 首次延时为14ms左右 N/A
1.发起资源请求;
 
2. 若IMG元素在渲染树中,显示加载失败的示意图;
 
3. 由于对资源进行缓存,后续对同一资源的请求,延时为0~1ms
 
//:0 无效URI,会自动补全为http://:0/ N/A 延时为0~1ms
1.不发起资源请求;
 
2. 若IMG元素在渲染树中,不显示加载失败的示意图。
 
N/A 延时为0~1ms
1.不发起资源请求;
 
2. 若IMG元素在渲染树中,显示加载失败的示意图。
 
N/A  延时为0~1ms N/A
1.发起资源请求,但会被浏览器取消掉(No Server Hits);
 
2. 若IMG元素在渲染树中,显示加载失败的示意图。
 
javascript:void 0 无效的Script URI Scheme N/A 延时为1~2ms
1.发起资源请求,但会被浏览器取消掉(No Server Hits);
 
2. 若IMG元素在渲染树中,显示加载失败的示意图。
 
N/A 延时为1~2ms
1.发起资源请求,但会被浏览器取消掉(No Server Hits);
 
2. 若IMG元素在渲染树中,显示加载失败的示意图。
 
N/A N/A N/A
 1.通过JS执行img.src=
 
"javascript:void 0"会报"拒绝访问"的异常。假如通过$.()或静态html方式设置src为javascript:void 0,则不会报该异常。
 
data:image/png,f
无效的Data URI Scheme
 
N/A 延时0~1ms
1.不会发起资源请求;
 
2. 若IMG元素在渲染树中,显示加载失败的示意图。
 
N/A 延时为1~2ms
1.不会发起资源请求;
 
2. 若IMG元素在渲染树中,显示加载失败的示意图。
 
N/A 延时0~1ms N/A
1.不会发起资源请求;
 
2. 若IMG元素在渲染树中,显示加载失败的示意图。
 
  由上述统计数据可知,在Chrome、FF和IE中行为比较同一的是加载无效DataURI Scheme。延时也比较短且稳定。因此jsDeffered采用此方式来为异步执行提速!
 
 
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<