芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
0

Data URI 初探及其自动化

作者 芒果/分类 代码/发布于 2010-02-21 20:27

Data URI 方案提供了一种通过 base64 编码在网页中直接嵌入文件的方法。

浏览器支持

Mozilla Firefox/Opera/Safari/Google Chrome/Internet Explorer 8

注:IE8 对 Data URI 的支持仅限于 img 标签和 CSS 背景,且数据必须小于 32k

格式

data:[<MIME-type>][;charset="<encoding>"][;base64],<data>

MIME-type: 指定数据的 MIME[1] 类型
;charset=”<encoding>”: 指定数据的字符集
;base64: 指定数据的编码方案

默认编码方案由 ;base64 指定,如果缺省,数据必须使用 URL Encoding[2] 转换为有效 ASCII 格式。如果 <MIME-type> 缺省,默认参数为 text/plain 类型,字符集为 US-ASCII 方案。

示例

HTML:

<img src="Data URI" alt="" />

CSS:

selector{background:url(Data URI);}

优势

1. 减少 HTTP 请求,节约带宽
2. 避免频繁建立 TCP 连接,加快载入速度
3. 使用 HTTPS 时,可减少开销
4. 避免浏览器并发连接数的限制
5. 防止非法的外部引用

缺陷

1. 不被单独缓存,父文件重新载入时必须重新加载
2. 内容变更时必须重新编码和嵌入
3. 缺乏 IE6 和 IE7 的支持
4. IE8 限制数据大小为 32k
5. base64 编码会增加 1/3 数据量

自动化

来自 Nicholas C. ZakasDataURI 自动化工具,命令行格式:

java -jar datauri-x.y.z.jar -o <output filename> <input filename>

兼容 IE6 & IE7

通过 CSS Hacks 结合 MHTML[3] 方案解决 IE6 和 IE7 不支持 DataURI 的情况。

/*
Content-Type: multipart/related; boundary="_"

--_
Content-Location:<identifier>
Content-Transfer-Encoding:base64

<data>
*/
selector{*background:url(mhtml:<stylesheet>!<identifier>);}

_: 指定分隔符 (任意字符串)
identifier: 指定内容位置标识符
stylesheet: 指定样式表绝对路径

[1] MIME: http://zh.wikipedia.org/wiki/MIME
[2] URL Encoding: http://www.w3schools.com/TAGS/ref_urlencode.asp
[3] MHTML: http://en.wikipedia.org/wiki/Mhtml

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/data-uri-preliminary-exploration-and-automation/" title="Data URI 初探及其自动化" rel="bookmark">Data URI 初探及其自动化 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

下面我简单说几句