DataURI详解

DataURI,不算新东西,却一直没用过,前些日子在webapp中用了点DataURI,就做了下相关的了解,看看到底适用不适用。

Data URI

Data URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。格式如下:

data:[<MIME type>][;charset=<charset>][;base64],<encoded data>

其实整体可以视为三部分,即声明:参数+数据,逗号左边的是各种参数,右边的是数据。

声明:data:是URI的协议头,表明其资源是一个data URI;

参数:

  1. MIME type,表示数据呈现的格式,即指定嵌入数据的MIME。对于PNG的图片,其格式是:image/png,如果没有指定,默认是:text/plain;
  2. character set(字符集)大多数被忽略,默认是:charset=US-ASCII。如果指定是的数据格式是图片时,字符集将不再使用;
  3. base64,这一部分将表明其数据的编码方式,此处为声明后面的数据的编码是base64,我们可以不必使用base64编码格式,如果那样,我们将使用标准的URL编码方式(形如%XX%XX%XX的格式);

数据:这个encoded data部分为实际的数据,可能包含空格,但是无关紧要。

例如:

浏览器的支持暂且不说,因为没有做pc的,手机上的还是可以的啦。

优点和缺点

这两点相信大家都看眼烦了,那就把我认为重要的say下喽。

优点:

  1. 减少HTTP请求数
  2. 避免了图片重新上传,清理缓存的问题
  3. 运用在模版环境中时,省去了拷贝图片的步骤
  4. ……

缺点:

  1. 无法重复利用。img虽然是一个请求数,但是加载完后,如果还有N次引用,那还1,而DataURI却必须是N次了;
  2. 图片等资源转换为DataURI所用的Base64编码之后,文件大小增加了好多(通常50%-300%),想想下,如果服务器端不做Gzip压缩的话,那不是要……,压缩后倒是跟原本的差不多大小;
  3. 加载、解码后渲染,消耗内存和CPU,手机上还得耗电池呢啊;
  4. 浏览器限制;
  5. 这个也是最可气的,那么一大长串编码无疑是对自己优雅代码的一个摧残啊,有代码洁癖的你能忍么?
  6. ……

如何获得图片的base64编码

在网上搜了几个在线的图片转义为base64的,缺发现没几个好用的,而且记不住网址,下面推荐一个,http://www.pjhome.net/web/html5/encodeDataUrl.htm(原版的),最初见到的是在飘飘那里:http://labs.pufen.net/my_collection/datauri.htm

当然,这么好的东西自己也必须要收藏一份儿了啊,格桑的博客的地址http://aiyouu.net/tools/datauri.html,用的时候方便啊,有空了再改造下。

哦,忘了说怎么用了,直接把图片拖到页面里面就可以了。

手机端DataURI比外链资源慢6倍

好久之前(那时候我还在上学)鬼哥写过DataURI会多消耗53%左右的CPU资源,内存多出4倍左右,耗时平均高出24.6倍,那手机上呢?

mobify最新的测试数据:DataURI要比简单的外链资源要慢6倍。

手机端DataURI比外链资源慢6倍

详情点击访问:mobify

使用建议

  1. sprite能用还得用啊,DataURI的方法要慎用,对于Webapp,还是研究各种缓存技术;
  2. 个别不能sprite且质量小的图片可以用DataURI
  3. 对个别BT需求时可以用来做为替代img的方案
  4. ……(期待你来补充的哦)

最后:URI,不是URL

如果不仔细看,真的会误把data URI看成data URL,然后用URL的方式去理解URI,其实不然!

URL是uniform resource locator的缩写,在web中的每一个可访问资源都有一个URL地址,例如图片,HTML文件,js文件以及style sheet文件,我们可以通过这个地址去download这个资源。

其实URL是URI的子集,URI是uniform resource identifier的缩写。URI是用于获取资源,包括其附加的信息的一种协议。附加信息可能是地址,也可能不是地址,如果是地址,那么这时URI就变成URL了。注意的是data URI不是URL,因为它并不包含资源的公共地址。

参考扩展阅读:

整理的不好,欢迎斧正!

This entry was posted in HTML/CSS, 前端技巧, 移动开发 and tagged . Bookmark the permalink.

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>