Data URI和MHTML完整解決所有瀏覽器_HTML/Xhtml_網頁製作

Data URI

Data URI 是由 RFC 2397 定義的一種把小文件直接嵌入文件的方案。透過以下語法就可以把小檔案變成指定編碼直接嵌入頁面中：

data:[][;base64],

1. MIME-type：指定嵌入資料的 MIME。其形式是[type]/[subtype]; parameter，例如png圖片對應的MIME是image/png。 parameter可以用來指定附加的信息，更多情況下是用於指定text/plain和text/htm等的文字編碼方式的charset參數。預設是text/plain;charset=US-ASCII。
2. base64：聲明後面的資料的編碼是base64的，否則資料必須要用百分號編碼（即對內容進行urlencode）。

在上個世紀HTML4.01引入了Data URI方案 ，到今天為止除了IE6和IE7之外，所有主流瀏覽器都支援，但IE8 Data URI的支援還是有限制的，只支援object（僅是圖片時）、img、input type=image、link和CSS中的URL，且資料量不能大於32K。

優點：

1. 減少HTTP請求數，沒有了TCP連線消耗和同一網域下瀏覽器的並發數限制。
2. 對於小檔案會降低頻寬。雖然編碼後資料量會增加，但卻減少了http頭，當http頭的資料量大於檔案編碼的增量，那麼就會降低頻寬。
3. 對於HTTPS站點，HTTPS和HTTP混用會有安全提示，而HTTPS相對於HTTP來講開銷要大更多，所以Data URI在這方面的優勢更明顯。
4. 可以把整個多媒體頁面儲存為一個檔案。

缺點：

1. 無法重複利用，同一個文件應用多次同一個內容，則需要重複多次，資料量大量增加，增加了下載時間。
2. 無法被獨自緩存，所以其包含文件重新載入時，它也要重新載入。
3. 客戶端需要重新解碼和顯示，增加了點消耗。
4. 不支援資料壓縮，base64編碼會增加1/3大小，而urlencode後資料量會增加更多。
5. 不利於安全軟體的過濾，同時也存在一定的安全隱患。

MHTML

MHTML是MIME HTML (Multipurpose Internet Mail Extension HTML)的縮寫，是由RFC 2557定義的把一個多媒體的頁面所有內容都保存到同一個文件解決方案。這個方案是由微軟提出從IE5.0開始支持，另外Opera9.0也開始支持，Safari可以把文件保存為.mht（MHTML文件的後綴）格式，但不支持顯示它。

MHTML和Data URI也比較類似，有更強大的功能和更複雜的語法，並且沒有Data URI中「無法重複利用」的缺點，但MHTML使用起來不夠靈活方便，例如對資源引用的URL在mht檔案中可以是相對位址，否則必須是絕對位址。 hedger在《Cross Browser Base64 Encoded Images Embedded in HTML》針對IE的解決方案使用的是相對路徑就是因為聲明了Content-type:message/rfc822使IE按照MHTML來解析，如果不修改Content -type則需要使用MHTML協議，這個時候必須使用絕對路徑，如《MHTML – when you need data: URIs in IE7 and under》。

應用

Data URI和MHTML兩者的配合可以完整的解決所有的主流瀏覽器，它們由於無法被緩存和重複利用的缺陷，所以並不適合直接在頁面中使用，但在CSS和JavaScript文件中對圖片適當地使用有非常大的優越性：

1. 大幅減少請求數，現在大型網站的CSS引用了大量的圖片資源。
2. CSS和JavaScript都可以被緩存，間接的實作了資料的快取。
3. 利用CSS可以解決Data URI的重複利用問題
4. 告別CSS Sprites，CSS Sprites的出現是為了減少請求數，但它除了帶來在不確定情況下的異常外，CSS Sprites還需要人為的圖片合併，即使有合併工具也依舊必須人為地在如何有效的拼圖上耗費大量的時間，並帶來維護的困難。當你遵循一定的設計原則後，你就可以完全拋棄CSS Sprites來編寫CSS，最後使用工具在上傳到伺服器環節把圖片轉換成Data URI和MHTML，如《利用data-uri合併樣式表和圖片》中用python實現的工具，這可以節省大量的時間。
5. base64編碼把圖片檔案增加了1/3，Data URI和MHTML同時使用相當於增加了2/3，但CSS和JavaScript可以使用gzip壓縮，其可以節省2/3的資料量，所以使用gzip壓縮後的最終資料量是(1 1/3) * 2 * (1/3) = 8/9，所以最終流量是減少的。

為了方便在CSS中實作Data URI和MHTML，我寫了一個Data URI & MHTML 生成器，你可以看利用其產生Data URI & MHTML應用程式實例。

在CSS檔案中使用應用MHTML時URL必須使用絕對路徑，導致非常不靈活，所以可以考慮使用CSS expression來解決（DEMO），例如：

   /*
   http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
   http://dancewithnet.com/2009/07/27/ get-right-url-from-html/
   */
  *background-image:expression(function(ele){
    ele.style.backgroundImage = 'url(mhtml:'          '!03114501408821761.gif)';
  }(this))