DIV CSS 佈局教程網

Data URI

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

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

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:' +
         document.getElementById('data-uri-css').getAttribute('href',4) +
         '!03114501408821761.gif)';
   }(this));