html5里的datauri优缺点以及浏览器支持情况

分类:Html_Css| 发布:camnprbubuol| 查看: | 发表时间:2013/11/29

html5的datauri的介绍和datauri的优缺点以及datauri的浏览器支持情况。检测您浏览器对HTML5 & CSS3的支持情况

一、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)。

二、Data URI的优点

  1. 减少HTTP请求数,没有了TCP连接消耗和同一域名下浏览器的并发数限制。
  2. 对于小文件会降低带宽。虽然编码后数据量会增加,但是却减少了http头,当http头的数据量大于文件编码的增量,那么就会降低带宽。
  3. 对于HTTPS站点,HTTPS和HTTP混用会有安全提示,而HTTPS相对于HTTP来讲开销要大更多,所以Data URI在这方面的优势更明显。
  4. 可以把整个多媒体页面保存为一个文件。

三、Data URI的缺点

  1. 无法被重复利用,同一个文档应用多次同一个内容,则需要重复多次,数据量大量增加,增加了下载时间。
  2. 无法被独自缓存,所以其包含文档重新加载时,它也要重新加载。提供一个缓存datauri的方法:缓存多个DataURI资源 摆脱CSS Sprites图片背景位置的约束
  3. 客户端需要重新解码和显示,增加了点消耗。不支持数据压缩,base64编码会增加1/3大小,而urlencode后数据量会增加更多。
  4. 不利于安全软件的过滤,同时也存在一定的安全隐患。

四、Data URI的支持情况

绝大多数的现代浏览器都支持data URI:

  1. Firefox 2+
  2. Opera 7.2+ – data URI必须少于4100个字符
  3. Chrome (all versions)
  4. Safari (all versions)
  5. Internet Explorer 8+ – data URI必须小于32k(说他不靠谱主要还是IE8一下浏览器的不支持造成的)

参考链接:http://en.wikipedia.org/wiki/Data_URI_scheme

使用工具:
各种文件转换成base64 - DataUrl

data URI Generator  http://dopiaza.org/tools/datauri/

来源:http://dwz.cn/bPH78

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/html5-data-uri.html