DataURL详解--转自格桑blog
DataURI详解
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下喽。
优点：
- 减少HTTP请求数
- 避免了图片重新上传，清理缓存的问题
- 运用在模版环境中时，省去了拷贝图片的步骤
- ……
缺点：
- 无法重复利用。img虽然是一个请求数，但是加载完后，如果还有N次引用，那还1，而DataURI却必须是N次了；
- 图片等资源转换为DataURI所用的Base64编码之后，文件大小增加了好多（通常50%-300%），想想下，如果服务器端不做Gzip压缩的话，那不是要……，压缩后倒是跟原本的差不多大小；
- 加载、解码后渲染，消耗内存和CPU，手机上还得耗电池呢啊；
- 浏览器限制；
- 这个也是最可气的，那么一大长串编码无疑是对自己优雅代码的一个摧残啊，有代码洁癖的你能忍么？
- ……
如何获得图片的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
使用建议
- sprite能用还得用啊，DataURI的方法要慎用，对于Webapp，还是研究各种缓存技术；
- 个别不能sprite且质量小的图片可以用DataURI
- 对个别BT需求时可以用来做为替代img的方案
- ……（期待你来补充的哦）
最后：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啊
整理的不好，欢迎斧正!
