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

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

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

Data URI

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

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

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

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

MHTML

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

MHTML和Data URI還比較類(lèi)似，有更強(qiáng)大的功能和更復(fù)雜的語(yǔ)法，并且沒(méi)有Data URI中“無(wú)法被重復(fù)利用”的缺點(diǎn)，但MHTML使用起來(lái)不夠靈活方便，比如對(duì)資源引用的URL在mht文件中可以是相對(duì)地址，否則必須是絕對(duì)地址。hedger在《Cross Browser Base64 Encoded Images Embedded in HTML》針對(duì)IE的解決方案使用的是相對(duì)路徑就是因?yàn)槁暶髁薈ontent-type:message/rfc822使IE按照MHTML來(lái)解析，如果不修改Content-type則需要使用MHTML協(xié)議，這個(gè)時(shí)候必須使用絕對(duì)路徑，如《MHTML – when you need data: URIs in IE7 and under》。

應(yīng)用

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

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

為了方便在CSS中實(shí)現(xiàn)Data URI和MHTML，我寫(xiě)了一個(gè)Data URI & MHTML 生成器，你可以看利用其生成Data URI & MHTML應(yīng)用實(shí)例。

在CSS文件中使用應(yīng)用MHTML時(shí)URL必須使用絕對(duì)路徑，導(dǎo)致非常不靈活，所以可以考慮使用CSS expression來(lái)解決（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));