IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

不成熟的技术:Data URI

标点符 2012-10-22 22:39:58 累计浏览 3,269 次
本机暂存

    一、Data URI简介

    Data URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中:

    data:[][;base64],

  • MIME-type:指定嵌入数据的MIME。其形式是[type]/[subtype]; parameter,比如png图片对应的MIME是image/png。parameter可以用來指定附加的信息,更多情況下是用于指定text/plain和text/htm等的文字编码方式的charset参数。默认是text/plain;charset=US-ASCII。
  • base64:声明后面的数据的编码是base64的,否则数据必须要用百分号编码(即对内容进行urlencode)。
  •     二、Data URI的优点

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

  • 无法被重复利用,同一个文档应用多次同一个内容,则需要重复多次,数据量大量增加,增加了下载时间。
  • 无法被独自缓存,所以其包含文档重新加载时,它也要重新加载。
  • 客户端需要重新解码和显示,增加了点消耗。不支持数据压缩,base64编码会增加1/3大小,而urlencode后数据量会增加更多。
  • 不利于安全软件的过滤,同时也存在一定的安全隐患。
  •     四、Data URI的支持情况

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

  • Firefox 2+
  • Opera 7.2+ - data URI必须少于4100个字符
  • Chrome (all versions)
  • Safari (all versions)
  • Internet Explorer 8+ - data URI必须小于32k(说他不靠谱主要还是IE8一下浏览器的不支持造成的)
  •     参考链接:http://en.wikipedia.org/wiki/Data_URI_scheme

        使用工具:data URI Generator  http://dopiaza.org/tools/datauri/

    同分类推荐文章

    1. translateZ() (2026-06-25 21:18:56)
    2. translateY() (2026-06-25 21:17:56)
    3. translateX() (2026-06-25 21:16:01)

    查看更多 前端 文章 →

    建议继续学习

    1. Firefox的about 页面 (累计阅读 14,053)
    2. 图说浏览器战争:火狐、微软、谷歌那些事 (累计阅读 7,538)
    3. base64_encode 和 urlencode (累计阅读 5,176)
    4. 你需要知道的三个CSS技巧 (累计阅读 4,795)
    5. 网站重构到底是什么,网站重构到底要多久 (累计阅读 4,175)
    6. 关于URL编码 (累计阅读 3,987)
    7. 从HTML 2.0到HTML5 (累计阅读 3,827)
    8. 五大浏览器对比测试性能 (累计阅读 3,566)
    9. 编码转换 (累计阅读 3,553)
    10. 关于对浏览器兼容性的一点点理解 (累计阅读 3,396)