DataURL详解--转自格桑blog

DataURI详解

Posted on 2013 年 09 月 09 日 by admin

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倍。

详情点击访问：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，因为它并不包含资源的公共地址。

参考扩展阅读：

• 关于base64编码的原理及实现（表示迷糊）
• Data URIs
• Data URI&MHTML: 用还是不用？
• Data URI的利弊
• 手机端DataURI比外链资源慢6倍
• 译文：data URI，不是URL啊

  原文：Data URIs explained

整理的不好，欢迎斧正!