JS魔法堂: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 SchemeUniform 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 无效的JavaScript 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()或静态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采用此方式来为异步执行提速!

 

四、总结                            

  这里仅仅对IMG元素加载http、javascript和data的URI Scheme等进行实验,加上实验手段等问题,难免导致统计数据不全面,若有纰漏希望大家指正,谢谢。

  尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/4148933.html ^_^肥子John

五、参考                            

  http://www.w3help.org/zh-cn/causes/BX9021

  http://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!

posted @ 2014-12-07 18:35 ^_^肥仔John 阅读( 5359) 评论( 0) 编辑 收藏
 

公告

 
本文转自
^_^肥仔John博客园博客,原文链接: http://www.cnblogs.com/fsjohnhuang/p/4148933.html /,如需转载请自行联系原作者
 
相关文章
|
1月前
|
JavaScript 前端开发 Java
面试官:你的项目有什么亮点?我:解决了JS脚本加载失败的问题!
面试官:你的项目有什么亮点?我:解决了JS脚本加载失败的问题!
|
1月前
|
JavaScript 前端开发 小程序
js将数组中相同的元素进行分组 必看
js将数组中相同的元素进行分组 必看
|
2月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何动态创建和插入元素?
JavaScript DOM 操作:如何动态创建和插入元素?
31 1
|
29天前
|
JavaScript
如何用js在页面中添加元素?
如何用js在页面中添加元素?
15 0
|
9天前
|
缓存 JavaScript 前端开发
前端工程化:优化JS加载速度
在现代Web应用中,JavaScript已成为必不可少的一部分,但是随着业务复杂度的增加,JS文件的体积也越来越大,导致网页加载速度变慢,影响用户体验。本文将介绍前端工程化的优化策略,以提高JS文件的加载速度。
|
21天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
16 0
|
25天前
|
前端开发 JavaScript API
JavaScript中多种获取数组最后一个元素的策略。
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
1月前
|
存储 算法 JavaScript
|
1月前
|
前端开发 JavaScript
探索JavaScript元素节点的属性和方法
探索JavaScript元素节点的属性和方法
7 0
|
1月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
17 0

相关产品

  • 云迁移中心