Data URI
Data URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中:
引用
data:[<MIME-type>][;base64],<data>
MIME-type:指定嵌入数据的MIME。其形式是[type]/[subtype]; parameter,比如png图片对应的MIME是image/png。parameter可以用來指定附加的信息,更多情況下是用于指定text/plain和text/htm等的文字编码方式的charset参数。默认是text/plain;charset=US-ASCII。
base64:声明后面的数据的编码是base64的,否则数据必须要用百分号编码(即对内容进行urlencode)。
在上个世纪HTML4.01引入了Data URI方案,到今天为止除了IE6和IE7之外,所有主流浏览器都支持,但IE8对Data URI的支持还是有限制的,只支持object(仅是图片时)、img、input type=image、link和CSS中的URL,且数据量不能大于32K。
优点:
- 减少HTTP请求数,没有了TCP连接消耗和同一域名下浏览器的并发数限制。
- 对于小文件会降低带宽。虽然编码后数据量会增加,但是却减少了http头,当http头的数据量大于文件编码的增量,那么就会降低带宽。
- 对于HTTPS站点,HTTPS和HTTP混用会有安全提示,而HTTPS相对于HTTP来讲开销要大更多,所以Data URI在这方面的优势更明显。
- 可以把整个多媒体页面保存为一个文件。
缺点:
- 无法被重复利用,同一个文档应用多次同一个内容,则需要重复多次,数据量大量增加,增加了下载时间。
- 无法被独自缓存,所以其包含文档重新加载时,它也要重新加载。
- 客户端需要重新解码和显示,增加了点消耗。
- 不支持数据压缩,base64编码会增加1/3大小,而urlencode后数据量会增加更多。
- 不利于安全软件的过滤,同时也存在一定的安全隐患。
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文件中对图片适当地使用有非常大的优越性:
- 大大减少请求数,现在大型网站的CSS引用了大量的图片资源。
- CSS和JavaScript都可以被缓存,间接的实现了数据的缓存。
- 利用CSS可以解决Data URI的重复利用问题
- 告别CSS Sprites,CSS Sprites的出现是为了减少请求数,但它除了带来在不确定情况下的异常外,CSS Sprites还需要人为的图片合并,即使有合并工具也依旧必须人为地在如何有效的拼图上耗费大量的时间,并带来维护的困难。当你遵循一定的设计原则后,你就可以完全抛弃CSS Sprites来编写CSS,最后使用工具在上传到服务器环节把图片转换成Data URI和MHTML,如《利用data-uri合并样式表和图片》中用python实现的工具,这可以节约大量的时间。
- 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));
分享到:
相关推荐
Data URI和MHTML是两种在Web开发中用于嵌入资源的技术,它们可以帮助优化网页加载速度和性能,尤其是在处理小文件和图像时。然而,这两种方法都有其特定的优缺点和适用场景。 Data URI(Data URL Scheme)是一种在...
1. 兼容性问题:老版本的IE浏览器(如IE6和IE7)不支持`data URI`,但可以通过MHTML等技术进行解决。 2. 不会缓存单独的图片:浏览器可能不会缓存`data URI`中的图片,可能导致初次加载时速度较慢。 3. 增大CSS文件...
以下是关于Data URI scheme及其在CSS中应用的详细解释: 1. **数据URI方案原理**: 数据URI方案允许开发者将文件内容以Base64编码的形式直接插入到HTML的`<img>`标签或CSS的`url()`函数中。这样,图像数据就成为...
对于CSS,这些步骤是: 组合多个CSS文件导致HTTP请求数量下降缩小CSS 嵌入任何小于 24KB 的CSS图像作为数据URI或MHTML (对于 IE <= 7) 将输出拆分回 2 个可以并行加载的偶数文件(不适用于 WP) GZIP -压缩...
在IT行业中,保存网页为MHT(MHTML)格式是一种常见的需求,这允许用户将整个网页,包括HTML、图片和其他资源,保存为一个单一的文件。MHT文件是一种Web档案格式,它通过嵌入所有外部资源(如图像、CSS、JavaScript...
标题中的“base 64 encode image in ie7 and under”涉及到的是在Internet Explorer 7(IE7)及...通过深入理解Base64编码、HTML的`data:`URI scheme和IE7的限制,开发者可以更好地处理老版本浏览器中的Web开发挑战。
XSS(Cross-Site ... - "7.5.2 data uris xss.pdf"可能讨论了data URI scheme如何被用来嵌入恶意脚本,以及如何防范。 了解并实施这些防御措施,开发者可以显著降低Web应用遭受XSS攻击的风险,保护用户数据安全。
然而,对于较老的IE浏览器,尤其是IE6和IE7,它们不支持`data:` URI scheme加载图片。为了解决这个问题,可以使用MHTML(MIME-encoded Web Archive)格式来呈现Base64编码的图片。MHTML格式允许在HTML文档中嵌入多个...