Data URI和MHTML完整解決所有瀏覽器

發(fā)布時間：2009-08-21 00:18:02 作者：佚名

我要評論

Data URI和MHTML兩者的配合可以完整的解決所有的主流瀏覽器，它們由于無法被緩存和重復利用的缺陷，所以并不適合直接在頁面中使用，但在CSS和JavaScript文件中對圖片適當?shù)厥褂糜蟹浅４蟮膬?yōu)越性.

Data URI

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

data:[<MIME-type>][;base64],<data>

MIME-type：指定嵌入數(shù)據(jù)的 MIME。其形式是[type]/[subtype]; parameter，比如png圖片對應的MIME是image/png。parameter可以用來指定附加的信息，更多情況下是用于指定text/plain和text/htm等的文字編碼方式的charset參數(shù)。默認是text/plain;charset=US-ASCII。
base64：聲明后面的數(shù)據(jù)的編碼是base64的，否則數(shù)據(jù)必須要用百分號編碼（即對內容進行urlencode）。

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

優(yōu)點：

減少HTTP請求數(shù)，沒有了TCP連接消耗和同一域名下瀏覽器的并發(fā)數(shù)限制。
對于小文件會降低帶寬。雖然編碼后數(shù)據(jù)量會增加，但是卻減少了http頭，當http頭的數(shù)據(jù)量大于文件編碼的增量，那么就會降低帶寬。
對于HTTPS站點，HTTPS和HTTP混用會有安全提示，而HTTPS相對于HTTP來講開銷要大更多，所以Data URI在這方面的優(yōu)勢更明顯。
可以把整個多媒體頁面保存為一個文件。

缺點：

無法被重復利用，同一個文檔應用多次同一個內容，則需要重復多次，數(shù)據(jù)量大量增加，增加了下載時間。
無法被獨自緩存，所以其包含文檔重新加載時，它也要重新加載。
客戶端需要重新解碼和顯示，增加了點消耗。
不支持數(shù)據(jù)壓縮，base64編碼會增加1/3大小，而urlencode后數(shù)據(jù)量會增加更多。
不利于安全軟件的過濾，同時也存在一定的安全隱患。

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協(xié)議，這個時候必須使用絕對路徑，如《MHTML – when you need data: URIs in IE7 and under》。

應用

Data URI和MHTML兩者的配合可以完整的解決所有的主流瀏覽器，它們由于無法被緩存和重復利用的缺陷，所以并不適合直接在頁面中使用，但在CSS和JavaScript文件中對圖片適當?shù)厥褂糜蟹浅４蟮膬?yōu)越性：

大大減少請求數(shù)，現(xiàn)在大型網(wǎng)站的CSS引用了大量的圖片資源。
CSS和JavaScript都可以被緩存，間接的實現(xiàn)了數(shù)據(jù)的緩存。
利用CSS可以解決Data URI的重復利用問題
告別CSS Sprites，CSS Sprites的出現(xiàn)是為了減少請求數(shù)，但它除了帶來在不確定情況下的異常外，CSS Sprites還需要人為的圖片合并，即使有合并工具也依舊必須人為地在如何有效的拼圖上耗費大量的時間，并帶來維護的困難。當你遵循一定的設計原則后，你就可以完全拋棄CSS Sprites來編寫CSS，最后使用工具在上傳到服務器環(huán)節(jié)把圖片轉換成Data URI和MHTML，如《利用data-uri合并樣式表和圖片》中用python實現(xiàn)的工具，這可以節(jié)約大量的時間。
base64編碼把圖片文件增加了1/3，Data URI和MHTML同時使用相當于增加了2/3，但CSS和JavaScript可以使用gzip壓縮，其可以節(jié)省2/3的數(shù)據(jù)量，所以使用gzip壓縮后的最終數(shù)據(jù)量是(1 + 1/3) * 2 * (1/3) = 8/9，所以最終流量是減少的。

為了方便在CSS中實現(xiàn)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:' +
         document.getElementById('data-uri-css').getAttribute('href',4) +
         '!03114501408821761.gif)';
   }(this));