URI是什么?

URI是uniform resource locator的简写，是一系列如何获得数据的协议。在一般的情况下，如果我们需要在HTML页面加入一个链接资源，如CSS、JavaScript文件或一个Image文件，其URL属性会告诉游览器去哪里下载这些文件，然后游览器会请求链接，然后下载这些文件。

为什么要说URL呢?不但是它们很像(我第一眼就把URI看成URL了)，而且URL其实也是一种URI，URI是一种通过一定的信息来获得资源的协议，当这种信息为一个URL地址时，URI就表现为URL。
Data URIs遵循如下规则

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

说明：
data – 指代URI协议
mime type – 代表数据类型，如png图片则为image/png，若不说明，默认为text/plain
charset – 如果不使用base64，则使用charset指定的字符类(有关base64的信息:http://en.wikipedia.org/wiki/Base64)
encoded data – 对应的编码信息
你可以在你的HTML或者CSS代码中使用data URI，而不用理会这个文件的路径。例如，你可以在CSS中使用data URI来指定一个背景图像。

li {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABFCAYAAAD6pOBtAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gMbBwwfAKopzQAAEfdJREFUeNrVW3uUHFWZ...) no-repeat;
}

还可以在中的src属性中来使用data URIs

<img width="64" height="69" alt="Treehouse Logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABFCAYAAAD6pOBtAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gMbBwwfAKopzQAAEfdJREFUeNrVW3uUHFWZ...">

URI data在线转换地址：http://www.abluestar.com/utilities/encode_base64/
PS：data URIs通常会很长！

浏览器支持

PC端

手机端：

具体可以查看: http://caniuse.com/datauri

Data URIs优点

1. 减少HTTP请求数，没有了TCP连接消耗和同一域名下浏览器的并发数限制。
2. 对于小文件会降低带宽。虽然编码后数据量会增加，但是却减少了http头，当http头的数据量大于文件编码的增量，那么就会降低带宽
3. 对于HTTPS站点，HTTPS和HTTP混用会有安全提示，而HTTPS相对于HTTP来讲开销要大更多，所以Data URI在这方面的优势更明显。
4. 可以把整个多媒体页面保存为一个文件。

Data URIs缺点

1. 无法被重复利用，同一个文档应用多次同一个内容，则需要重复多次，数据量大量增加，增加了下载时间。
2. 无法被独自缓存，所以其包含文档重新加载时，它也要重新加载。
3. 客户端需要重新解码和显示，增加了点消耗。
4. 不支持数据压缩，base64编码会增加1/3大小，而urlencode后数据量会增加更多。
5. 不利于安全软件的过滤，同时也存在一定的安全隐患。