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

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ù)厥褂糜蟹浅4蟮膬?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));
相關(guān)文章
- HTML表格用于在網(wǎng)頁(yè)上展示數(shù)據(jù),通過(guò)標(biāo)簽及其相關(guān)標(biāo)簽來(lái)創(chuàng)建,表格由行和列組成,每一行包含一個(gè)或多個(gè)單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細(xì)介紹HTML表格2025-03-12
- 本文介紹了三種禁止HTML頁(yè)面滾動(dòng)的方法:通過(guò)CSS的overflow屬性、使用JavaScript的滾動(dòng)事件監(jiān)聽(tīng)器以及使用CSS的position:fixed屬性,每種方法都有其適用場(chǎng)景和優(yōu)缺點(diǎn),感興2025-02-24
使用HTML和CSS實(shí)現(xiàn)文字鏤空效果的代碼示例
在 Web 開(kāi)發(fā)中,文本的視覺(jué)效果是提升用戶(hù)體驗(yàn)的重要因素之一,通過(guò) CSS 技巧,我們可以創(chuàng)造出許多獨(dú)特的效果,例如文字鏤空效果,本文將帶你一步一步實(shí)現(xiàn)一個(gè)簡(jiǎn)單的文字鏤空2024-11-17Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼
在Html中,a標(biāo)簽?zāi)J(rèn)的超鏈接樣式是藍(lán)色字體配下劃線(xiàn),這可能不滿(mǎn)足所有設(shè)計(jì)需求,如需去除這些默認(rèn)樣式,可以通過(guò)CSS來(lái)實(shí)現(xiàn),本文給大家介紹Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼2024-09-25HTML文本域如何設(shè)置為禁止用戶(hù)手動(dòng)拖動(dòng)
在HTML中,可以通過(guò)設(shè)置CSS的resize屬性為none,來(lái)禁止用戶(hù)手動(dòng)拖動(dòng)文本域(textarea)的大小,這種方法簡(jiǎn)單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進(jìn)行測(cè)試以確保2024-09-25如何通過(guò)HTML/CSS 實(shí)現(xiàn)各類(lèi)進(jìn)度條的功能
本文詳細(xì)介紹了如何利用HTML和CSS實(shí)現(xiàn)多種風(fēng)格的進(jìn)度條,包括基礎(chǔ)的水平進(jìn)度條、環(huán)形進(jìn)度條以及球形進(jìn)度條等,還探討了如何通過(guò)動(dòng)畫(huà)增強(qiáng)視覺(jué)效果,內(nèi)容涵蓋了使用HTML原生標(biāo)簽2024-09-19HTML中Canvas關(guān)鍵知識(shí)點(diǎn)總結(jié)
Canvas 提供了一套強(qiáng)大的 2D 繪圖 API,適用于各種圖形繪制、圖像處理和動(dòng)畫(huà)制作,可以幫助你創(chuàng)建復(fù)雜且高效的網(wǎng)頁(yè)圖形應(yīng)用,這篇文章主要介紹了HTML中Canvas關(guān)鍵知識(shí)點(diǎn)總結(jié)2024-06-03html table+css實(shí)現(xiàn)可編輯表格的示例代碼
本文主要介紹了html table+css實(shí)現(xiàn)可編輯表格的示例代碼,主要使用HTML5的contenteditable屬性,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2024-03-06HTML中使用Flex布局實(shí)現(xiàn)雙行夾批效果
本文主要介紹了HTML中使用Flex布局實(shí)現(xiàn)雙行夾批效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2024-02-22HTML+CSS實(shí)現(xiàn)炫酷登錄切換的項(xiàng)目實(shí)踐
在網(wǎng)站開(kāi)發(fā)中,登錄頁(yè)面是必不可少的一部分,本文就來(lái)介紹一下HTML+CSS實(shí)現(xiàn)登錄切換,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需2024-02-02