Data URI explained, URI 不是URL啊？

原文链接：

http://www.ibaiyang.org/2013/01/31/data-uris-explained/

 

自从接触开发web，我会经常的发现大家对URI的错误理解，导致分不清URL和URI的差别。以URL同样的方式去解释URI，却没有仔细的去明白背后的意义。

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的格式非常简单，具体可以看RFC2397，data URI基本的格式如下：

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

在这个格式中，

data:

是URI的协议头，表明其资源是一个data URI。第二部分，MIME type，表示数据呈现的格式，对于PNG的图片，其格式是：image/png，如果没有指定，默认的格式是：text/plain。这个character set(字符集）大多数被忽略，如果指定是的数据格式是图片时，字符集将不再使用；下一部分，将表明其数据的编码方式，我们可以不必使用base64编码格式，如果那样，我们将使用标准的URL编码方式（形如%XX%XX%XX的格式）；这个encoded data部分，可能包含空格，但是无关紧要。

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

下面是一个例子：

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

如果不用base64进行编码的话，那么用标准的URL编码，那么其如下：

data:image/gif,GIF89a%22%00%1B%00%F7%00%00lll%D6%D6%D6%FF%EB%85%FF%E0%7B%FF%F7%91%FF%D4o%DF%DF%DF%F6%F6%F6%87%87%87%FE
%CBf%FF%F4%8E%E6%B3NKKK%C5%92-%FF%FF%99%FF%FF%FF%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%2C%00%00%00%00%22%00%1B%00%00%08%A9%00%1F%08%1CH%B0%A0%C1%83%08%13*%5C%C8%B0%A1%C3%87%10%23J%9CH%91%60%83%8B%0D%0C%1C%A8h%B0%81%C5%00%1B9%0A%F4%E8%A0%A4%83%07%181j%9C%D8%80%80%82%97%2F%0B6%40%60%80%A5%00%01)s%AA%94%D8%60%80G%84%02P%22%E0Y%A0%81%C9%A3%25%138h%00%80g%02%A3%04%A2J%8D%BA%60i%D3%88%0D%9E%3A%B8%C9%95kU%A6N%8D%0E%18Kv%EC%D7
%AB%10%B3%1A-%C0%B6-%5B%A3%60%23%1A%D0I%97%C1%D0%88%07%02%20%00%C0%B7%AF_%00%08%02L%3C%60%20%80%E1%C3%88%03%AC%14%C9%B8%B1%E3%C7%90%23K%9EL0%20%00%3B

显而易见，进过base64编码后的数据小了许多。
Note: base64编码实际上使得image图片数据变得更大。如果使用HTTP 压缩，你将不能注意到其细微的变化，因为base64可以很好的压缩；如果你不用HTTP压缩，或许你能check一下实际你发了多少字节。

不仅仅是图片

如今，我们多数谈论data URI时，通常都是谈论嵌入在HTML，CSS文件里的图片。实际上，你可以嵌入任何数据格式，甚至包含HTML文件自身。

这里有一个工具，你可以来尝试一下URI协议。

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

Inline images use the data: URI scheme to embed the image data in the actual page.This can increase the size of your HTML document.Combininginline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages.Inline images are not yet supported across all major browsers.

最后，我们利用浏览器做一个小的test。请点击以下连接，君，请看浏览器输入栏哦。
猛点击之

References：
http://www.nczonline.net/blog/2009/10/27/data-uris-explained/