javascript中Data URI使用详解

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

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

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

data:[][;charset=][;base64],

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

声明：
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的格式）；

注：base64是一种编码方式，将数据变成位流(bit stream),然后将其映射到base64的集合内。
base64包含A-Z，a-z,自然数以及+,/符号。等号=表明我们需要进行位填充(padding）。

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

例如：data:image/png;base64,iVBORw0KGgoAAAA…/5AhVEMnSs9MAAAAASUVORK5CYII=

代码
Data URI支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

所以，这就是为什么我开始要先说明是Data URI，不是URL；因为只有当附加信息为文件（图片，HTML文件，js文件以及style sheet文件）时，才可以将它理解为URL；而附加信息并非只可以为【文件】，也可以是【文本数据】；

例1：（文本数据）

data:text/plain;base64,bXkgbmFtZSBpcyBKaW9uZy4=

代码
data:text/plain;charset=utf-8;base64,5biV5ouT6YCK5Y+85Y+855qE
例2：（图片数据）

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA7ElEQVQ4Ed2TLY7DMBBGP/cEvYFpWY+wZT5CjhDoHqMscKHDCgO7LMsCCx2WFhm6rPCrnB81srOVumSljWRFtue9GY1tYUlu8MuvLbEKaFsKCPHeKNshaS+I80tdw7kaWsY76TwVKIOvww7r2wXtFYAysL5DlW9TOqyEHlgDAiBUwcaT965iLsc1mbFoHMk7uyrnNsQBNAPIp0B98hxgd6Ke4DE4AKpo2GtGeSLQlaOfZ57BfXUAZXak9Z5N8bFQwQIwgUv/qYKoiRq1J8gfhjVJIyPBsH/73if3Yjr32LAoiINezf+BQPz5a3wA3EDHM/SuNwwAAAAASUVORK5CYII=

优点
1：减少HTTP请求数，没有了TCP连接消耗和同一域名下浏览器的并发数限制。

2：对于小文件会降低带宽。虽然编码后数据量会增加，但是却减少了http头，当http头的数据量大于文件编码的增量，那么就会降低带宽。

3：对于HTTPS站点，HTTPS和HTTP混用会有安全提示，而HTTPS相对于HTTP来讲开销要大更多，所以Data URI在这方面的优势更明显。

4：可以把整个多媒体页面保存为一个文件。

5：当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时
…
…

缺点
1：无法被重复利用，同一个文档应用多次同一个内容，则需要重复多次，数据量大量增加，增加了下载时间。

2：无法被独自缓存，所以其包含文档重新加载时，它也要重新加载。

3：客户端需要重新解码和显示，增加了点消耗。

4：不支持数据压缩，base64编码会增加1/3大小，而urlencode后数据量会增加更多。

5：不利于安全软件的过滤，同时也存在一定的安全隐患。

6：移动端不宜使用 Data URI 技术（解码耗 CPU）。

7：不利于维护
…
…

注：A：通过CSS样式文件使用Data URI。
B：使用gzip压缩后的最终数据量是(1 + 1/3) * 2 * (1/3) = 8/9，所以最终流量是减少的。

使用方式
1：嵌入文档使用，例如：

代码
注：这种方法避免了一次HTTP请求，但却无法被浏览器缓存，每次使用时都需要重新加载一次！

2：通过CSS样式文件，例如：

.img_box { 
         
         
          border: 1px solid gray;
          padding: 10px;
          background-image:
          url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA7ElEQVQ4Ed2TLY7DMBBGP/cEvYFpWY+wZT5CjhDoHqMscKHDCgO7LMsCCx2WFhm6rPCrnB81srOVumSljWRFtue9GY1tYUlu8MuvLbEKaFsKCPHeKNshaS+I80tdw7kaWsY76TwVKIOvww7r2wXtFYAysL5DlW9TOqyEHlgDAiBUwcaT965iLsc1mbFoHMk7uyrnNsQBNAPIp0B98hxgd6Ke4DE4AKpo2GtGeSLQlaOfZ57BfXUAZXak9Z5N8bFQwQIwgUv/qYKoiRq1J8gfhjVJIyPBsH/73if3Yjr32LAoiINezf+BQPz5a3wA3EDHM/SuNwwAAAAASUVORK5CYII="); 
         }
1

注：这种方法避免了一次HTTP请求，还能同CSS文件一起被浏览器缓存起来，重复使用，不会每次使用时都加载一次。
浏览器支持情况
1) Firefox 2+

2) Opera 7.2+ – 数据URI不得超过4100个字符

3) Chrome（所有版本）

4) Safari（所有版本）

5) Internet Explorer 8+ – 数据URI必须小于32 k

性能的影响
Data URI最有兴趣的一点是它允许让你在文件中嵌入其他的文件。许多新手将图片嵌入在CSS文件中来作为一种提高性能的方式。实际上，有许多研究表明，HTTP请求是很多网站性能黑洞，能减少HTTP请求从某种意义上讲是可以提高性能的。“Minimize the HTTP request”也恰好是Yahoo的准则。

但是很多研究也表明，Data URI的滥用反而会适得其反：
1：base64下载速度较慢
2：base64在css下载完成前一直处于“白屏”状态
3：使用Data URI方式的Demo在渲染时会比不使用时多消耗53%左右的CPU资源，内存多出4倍左右，耗时平均高出24.6倍 。由此可见，使用Data URl方式还是需要更多的考量，在可接受的范围内适量使用。
…
…
参考：

Data URI&MHTML: 用还是不用？
移动端性能大比拼：CSS Sprites vs. Data URI
那么我们应该在什么情况下来使用Data URI呢？详见下文：

Data URI使用建议
1：建议开发者限制Data URI在较小资源上的使用，并且不要在CSS或内联HTML里多次使用。

2：能使用sprite的地方还是尽量使用sprite。

3：个别不方便使用sprite且质量小的图片可以使用data uri，比如 – 宽高不固定且又有要求background-position:center bottom。

4：repeat/repeat-x/repeat-y的图片。

5：对个别BT需求时可以用来做为替代img的方案。

base64在线生成工具
1：图片在线转换Base64

2：Data URI编码工具

3：Data URI Maker