1.簡介
Data URL給了我們一種很巧妙的將圖片“嵌入”到HTML中的方法混埠。跟傳統(tǒng)的用img標(biāo)記將服務(wù)器上的圖片引用到頁面中的方式不一樣梁棠，在Data URL協(xié)議中世舰，圖片被轉(zhuǎn)換成base64編碼的字符串形式庞瘸，并存儲(chǔ)在URL中惜论，冠以mime-type
圖片在網(wǎng)頁中的使用方法通常是下面這種利用img標(biāo)記的形式：
<img src="images/myimage.gif ">
這種方式中许赃，img標(biāo)記的src屬性指定了一個(gè)遠(yuǎn)程服務(wù)器上的資源。當(dāng)網(wǎng)頁加載到瀏覽器中時(shí)馆类，瀏覽器會(huì)針對(duì)每個(gè)外部資源都向服務(wù)器發(fā)送一次拉取資源請(qǐng)求混聊，占用網(wǎng)絡(luò)資源。大多數(shù)的瀏覽器都有一個(gè)并發(fā)請(qǐng)求數(shù)不能超過4個(gè)的限制乾巧。這意味著句喜，如果一個(gè)網(wǎng)頁里嵌入了過多的外部資源，這些請(qǐng)求會(huì)導(dǎo)致整個(gè)頁面的加載延遲沟于。而使用Data URL技術(shù)咳胃，圖片數(shù)據(jù)以base64字符串格式嵌入到了頁面中，與HTML成為一體旷太，它的形式如下：
<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">
從上面的base64字符串中你看不出任何跟圖片相關(guān)的東西展懈，但下面销睁，我們將傳統(tǒng)的img寫法和現(xiàn)在的Data URL用法左右對(duì)比顯示，你就能看出它們是完全一樣的效果存崖。但實(shí)際上它們是不一樣的冻记，它們一個(gè)是引用了外部資源，一個(gè)是使用了Data URL来惧。
幾乎所有的現(xiàn)代瀏覽器都支持Data URL格式冗栗，包括火狐瀏覽器，谷歌瀏覽器供搀，Safari瀏覽器贞瞒，opera瀏覽器。IE8也支持趁曼，但有部分限制军浆，IE9完全支持。
- 為什么Data URL是個(gè)好東西
Data URL能用在很多場合挡闰，跟傳統(tǒng)的外部資源引用方式相比乒融，它有如下獨(dú)到的用處
*當(dāng)訪問外部資源很麻煩或受限時(shí)
*當(dāng)圖片是在服務(wù)器端用程序動(dòng)態(tài)生成，每個(gè)訪問用戶顯示的都不同時(shí)摄悯。
*當(dāng)圖片的體積太小，占用一個(gè)HTTP會(huì)話不是很值得時(shí)奢驯。
Data URL也有一些不適用的場合
*Base64編碼的數(shù)據(jù)體積通常是原數(shù)據(jù)的體積4/3申钩，也就是Data URL形式的圖片會(huì)比二進(jìn)制格式的圖片體積大1/3瘪阁。
*Data URL形式的圖片不會(huì)被瀏覽器緩存，這意味著每次訪問這樣頁面時(shí)都被下載一次管跺。這是一個(gè)使用效率方面的問題——尤其當(dāng)這個(gè)圖片被整個(gè)網(wǎng)站大量使用的時(shí)候。
3.文件頭的不同
data:image/gif;base64,
data:image/png;base64,
data:image/jpg;base64,
上述不同的文件頭,對(duì)應(yīng)相同的base64數(shù)據(jù),一般都是可以解析的,具體原因未知
4.3的問題
