DataURL详解--转自格桑blog

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

Data URI

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

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

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

声明：data:是URI的协议头，表明其资源是一个data URI；

参数：

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

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

例如：

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

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

优点：

缺点：

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

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

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

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

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

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

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

详情点击访问：mobify

如果不仔细看，真的会误把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，因为它并不包含资源的公共地址。

整理的不好，欢迎斧正!