一、前言
二、資源加載的相關屬性和事件
資源加載首先當然是确定資源位置的 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）。
三、實驗開始
本次實驗将建立 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事件
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
首次請求延時為3~9ms
發生在onload事件之後
:0
無效URI，
URI自動補全為http://localhost
:9000/:0
若IMG元素
在渲染樹中，
則會顯示加載
失敗的示意圖。
延時為5~300+ms
1.發起資源請求
延時為16~60ms
首次請求延時為16ms左右
空字元串，""
無效URI
延時為0~1ms
1.不發起資源請求；
2. 若IMG元素在渲染樹中，不顯示加載失敗的示意圖。
N/A
2. 若IMG元素在渲染樹中，顯示加載失敗的示意圖。
延時為0~1ms
空白字元串，" "
延時為0~1ms
延時為16~60ms
首次延時為14ms左右
N/A
2. 若IMG元素在渲染樹中，顯示加載失敗的示意圖；
3. 由于對資源進行緩存，後續對同一資源的請求，延時為0~1ms
//:0
無效URI，會自動補全為http://:0/
延時為0~1ms
延時為0~1ms
1.發起資源請求，但會被浏覽器取消掉（No Server Hits）；
javascript:void 0
無效的JavaScript URI Scheme
延時為1~2ms
1.通過JS執行img.src=
"javascript:void 0"會報"拒絕通路"的異常。假如通過$.html()或靜态html方式設定src為javascript:void 0，則不會報該異常。
data:image/png,f
無效的Data URI Scheme
延時0~1ms
1.不會發起資源請求；
延時為1~2ms
延時0~1ms
由上述統計資料可知，在Chrome、FF和IE中行為比較同一的是加載無效DataURI Scheme。延時也比較短且穩定。是以jsDeffered采用此方式來為異步執行提速！
四、總結
這裡僅僅對IMG元素加載http、javascript和data的URI Scheme等進行實驗，加上實驗手段等問題，難免導緻統計資料不全面，若有纰漏希望大家指正，謝謝。
五、參考
http://www.w3help.org/zh-cn/causes/BX9021
http://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src
如果您覺得本文的内容有趣就掃一下吧！捐贈互勉！
<a href="http://home.cnblogs.com/u/fsjohnhuang/">^_^肥仔John</a>
<a href="http://home.cnblogs.com/u/fsjohnhuang/followees">關注 - 85</a>
<a href="http://home.cnblogs.com/u/fsjohnhuang/followers">粉絲 - 707</a>
<a>+加關注</a>
2
<a></a>
<a href="http://www.ucancode.com/index.htm" target="_blank">【推薦】超50萬VC++源碼: 大型工控、組态\仿真、模組化CAD源碼2018！</a>
<a href="https://cloud.tencent.com/developer/support-plan?fromSource=gwzcw.710852.710852.710852" target="_blank">【推薦】加入騰訊雲自媒體扶持計劃，免費領取域名&伺服器</a>
<b>最新IT新聞</b>:
<b>最新知識庫文章</b>:
<a href="mailto:John@github" target="_blank">肥仔John@github</a>