HTML之Data URL（轉）

Data URL給了我們一種很巧妙的將圖片“嵌入”到HTML中的方法。跟傳統的用img標記將服務器上的圖片引用到頁面中的方式不一樣，在Data URL協議中，圖片被轉換成base64編碼的字符串形式，並存儲在URL中，冠以mime-type。本文中，我將介紹如何巧妙的使用Data URL優化網站加載速度和執行效率。

1. Data URL基本原理

Data URL技術，圖片數據以base64字符串格式嵌入到了頁面中，與HTML成為一體，它的形式如下：

        <img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
            yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
            ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
            LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
            k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
            ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">  

幾乎所有的現代瀏覽器都支持Data URL格式，包括火狐瀏覽器，谷歌瀏覽器，Safari瀏覽器，opera瀏覽器。IE8也支持，但有部分限制，IE9完全支持。

IE6/7是不支持Data URL技術。

2. 為什么Data URL是個好東西

Data URL能用在很多場合，跟傳統的外部資源引用方式相比，它有如下獨到的用處：

• 當訪問外部資源很麻煩或受限時
• 當圖片是在服務器端用程序動態生成，每個訪問用戶顯示的都不同時。
• 當圖片的體積太小，占用一個HTTP會話不是很值得時。

Data URL也有一些不適用的場合

• Base64編碼的數據體積通常是原數據的體積4/3，也就是Data URL形式的圖片會比二進制格式的圖片體積大1/3。
• Data URL形式的圖片不會被瀏覽器緩存，這意味着每次訪問這樣頁面時都被下載一次。這是一個使用效率方面的問題——尤其當這個圖片被整個網站大量使用的時候。

然而，Data URL這些不利的地方完全可以避免或轉化。本文的重點就是要討論這個問題。

3. 在CSS里使用Data URL

當第一次看到Data URL的作用和用法時，你也許會很不疑惑，“為什么要麻煩的將圖片轉換成base64編碼字符串，還要嵌入的網頁中，將HTML代碼弄的混亂不堪，甚至還會有性能上的問題。”

誠然，無法否認緩存在瀏覽器性能中的重要作用——如何能將Data URL數據也放入瀏覽器緩存中呢？答案是：通過CSS樣式文件。CSS中的url操作符是用來指定網頁元素的背景圖片的，而瀏覽器並不在意URL里寫的是什么——只要能通過它獲取需要的數據。所以，我們就有了可以將Data URL形式的圖片存儲在CSS樣式表中的可能。而所有瀏覽器都會積極的緩存CSS文件來提高頁面加載效率。

假設我們的頁面里有一個很小的div元素，我們想用一種灰色的斜紋圖案做它的背景，這種背景在當今的網站設計者中非常流行。傳統的方法是制作一個3×3像素的圖片，保存成GIF或PNG格式，然后在CSS的background-image屬性中引用它的地址。而Data URL則是一種更高效的替代方法，就像下面這樣。

<style>
    .striped_box {
        width: 100px;
        height: 100px;
        background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");
        border: 1px solid gray;
        padding: 10px;
    }
</style>
<div class="striped_box lazy ">
    這是一個有條紋的方塊
</div>

4.Data URL 問題

 說到Data URI的優點，自然少不了“減少鏈接數”，把圖片轉為Base64編碼，以減少圖片的鏈接數。我們先想當然一下，同樣一張圖片，如果不用發起一個下載請求，打開速度是會更快的。但是，有幾個問題需要關注下：

• 圖片始終是要下載的，那么下載一張圖片的速度快還是下載一堆編碼快？
• 瀏覽器對圖片的顯示，處理效率哪個更快？
• 圖片的緩存問題

5.DataURL在Web瀏覽器中的兼容性總結

1. IE8+，Firefox，Chrome，Opera，Safari 等現代瀏覽器普遍支持data URL
2. IE8 data URL 最大長度限制為32k字節，超出無效。IE9+沒有這個限制
3. IE只識別base64編碼或百分號編碼(URL編碼, encodeURIComponent)的data URL，IE不識別無編碼的data URL，非IE瀏覽器可識別無編碼的data URL
4. IE不支持對<iframe>,<frame>標簽的src設置data URL
5. IE官方說法說data URL僅支持以下5種使用場景：
   • object (images only)
   • img
   • input type=image
   • link
   • CSS declarations that accept a URL
6. 據本人實測，IE也在除了官方所述5種之外的其它場合支持data URL：
   1. a href
   2. meta refresh. 示例：

      1. <meta http-equiv="refresh" content="5;URL=data:text/html;base64,xxxx....">  

   3. script src
   4. window.open
   5. embed src
7. 對於audio, video一類的元素，往往資源文件較大，使用data URL並不常見，我也沒有對其進行測試。
8. Firefox中粘貼截圖是直接轉換為data URL的圖片，其它瀏覽器干脆無法粘貼，我記得以前Chrome好像可以粘貼截圖的，今天再測Chrome,Opera都不能粘貼截圖(<div contenteditable></div>做的測試).   （粘貼截圖常用於在線富文本編輯器）
9. 可為data URL指定字符集編碼。示例：data:text/plain;charset=US-ASCII,xxxx....

附錄：

DataURL語法規則：

       dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data
       mediatype  := [ type "/" subtype ] *( ";" parameter )
       data       := *urlchar
       parameter  := attribute "=" value