Data URI和MHTML完整解决所有浏览器

所属分类: HTML/Xhtml / 网页制作 阅读数: 1743
收藏 0 赞 0 分享

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));

更多精彩内容其他人还在看

HTML中button标签点击实现页面跳转的三种方法

方法1:使用onclick事件<input type="button" value="按钮"onclick="javascrtpt:window.location.href='http://www.baidu.com/'&q... 查看详情
收藏 0 赞 0 分享

详解HTML中的图片标签的用法

在HTML中<img>这个标签是定义文本中的图片标签,它的作用就比如说可以提供图片的名字、提供图片的尺寸大小和提供图片的一些图片属性,比如Alt这个属性,可以给图片一个名称来告诉朋友们。这个也是对seo优化的一种细节上的方式。这样做可以让百度蜘蛛可以知道你这个图片是个... 查看详情
收藏 0 赞 0 分享

HTML中利用div+CSS实现简单的箭头图标的代码

在网页设计中,我们经常得会用到一些箭头做为装饰来点缀我们的网页,虽然现在很多的网站的设计者们都喜欢以引用字体图标的形式来实现箭头的效果,但那样也会给网页的加载造成一些影响。今天飞鸟慕鱼小编就给大家说一说,在网页设计中如何利用div加CSS的方式来实现一些箭头的效果。DIV+CSS... 查看详情
收藏 0 赞 0 分享

html中常用的转义字符总结

html中常用的转义字符总结,具体内容如下所示:&nbsp;  不断行的空格&ensp;  半方大的空格&emsp;   全方大的空格&lt;     小于 <&gt;    大于 >&amp;   ... 查看详情
收藏 0 赞 0 分享

HTML6实现折叠菜单与手风琴菜单的实例代码

页面主体部分:<body> <ul id="menu"> <li> <a href="#">一级菜单1</a> ... 查看详情
收藏 0 赞 0 分享

html 仿百度百科导航下拉菜单功能

html 仿百度百科导航下拉菜单功能,具体代码如下所示:演示图1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml... 查看详情
收藏 0 赞 0 分享

viewport 的基本原理以及详细使用方法

一.viewport的概要移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面,这个虚拟窗口就是viewport,目的是正常展示没有做移动端适配的网页,可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条,这里可显示区域的宽度就是viewport的... 查看详情
收藏 0 赞 0 分享

使用html2canvas对有百度地图的Dom元素处理成图片的解决

问题1:百度地图应用的是瓦片式图片(地图是一张张图片拼出来的),html2canvas 处理时,遇到非同一域名下的图片,浏览器会显示跨域的报错,也无法用反向代理来解决,因为瓦片图片的域名不确定,无法指定 proxy_pass解决:使用百度地图静态图处理( http://lbsyu... 查看详情
收藏 0 赞 0 分享

n个容器元素实现无限滚动的实现代码

场景如何正确渲染多达10000个元素的列表。无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。当你使用滚动作为发现数据的主要方法时,它可能使你的用户在网页上停留更长时间并提升用户参与度。随着社交媒体的流行,大量的数据被用户消费。无... 查看详情
收藏 0 赞 0 分享

html浮动提示框功能的实现代码

一般的表单提示总会占据表单的位置,让表单边长,或者变宽,影响布局,但如果让提示框像对话框一样浮在所需内容旁边就可以解决这一问题。HTML及样式首先做一张表单<div id="form-block"> <h1>注册</... 查看详情
收藏 0 赞 0 分享
查看更多