uc data text html,dataURI: 数据统一资源标志符

1、Img src 传统方式

传统的 HTML 嵌入图片都采用以下方式外部链接：

以上是目前主流的 HTML 链接图片的方式，通过 img 标记的 src 属性指定了一个远程服务器上的资源。当网页加载到浏览器中时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求，占用网络资源。

2、DataURI 现代方式

使用 dataURI 技术，图片数据以 base64 字符串格式嵌入到了页面中，与 HTML 成为一体，它的形式如下：

以上 base64 字符串已经完全看不出任何跟图片相关的信息，图片内容已经和页面融为一体，已不会因从外部链接或外部链接的各种原因受影响。

dataURI 已经受到当前主流的现代浏览器支持，如：火狐，谷歌，Safari，Opera，以及较高版本的 IE 浏览器。

3、dataURI 不完善的方面

1> Base64 编码的数据体积通常是原数据的体积 4/3，也就是 dataURI 形式的图片会比二进制格式的图片体积大 1/3。

2> dataURI 形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。

3> 目前仅建议在链入小图标或小型单色图片时使用 dataURI，如果图片过大，会生成非常冗长的字符串。

4、dataURI 类型 URI 的形式

dataURI 数据可以直接在浏览器的地址栏中输入显示内容，如将以下代码在浏览器中运行，即可显示一个加粗的 "Hello, world!"，data: 后面的数据直接用做网页的内容，并非网页的地址。

以下字符在浏览器中将显示为” 你好，中文！”，charset=UTF-8 为字符编码方式。

dataURI 形式:

5、dataURI 使用规范

格式为 data:{mimeType};base64,{code}{mimeType}

图片规范为：JPG 文件：image/jpeg，GIF 文件：image/gif，PNG 文件：image/png。

{code}：指图片二进制转换成 base64 的字符串。dataURI scheme 在 RFC2397 中定义，旨在将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。

语法定义：

在实际使用时，要将 dataURI 数据也放入浏览器缓存，可以使用引入 CSS 方式，CSS 中的 URL 操作符是用来指定网页元素的背景图片，浏览器并不在意 URL 里写的是什么，只要能通过它获取需要的数据。所以，可以将 dataURI 形式的图片存储在 CSS 样式表，然后再通过所有浏览器都会积极的缓存 CSS 文件的方式来提高页面加载效率。

实际应用：

1> HTML 嵌入方式

2> CSS 引用方式

6、关于 dataURI 和 dataURL 名称

目前很多关于介绍 dataURI 的文章都混淆了 dataURI 和 dataURL，正确的是 dataURI。

URI = Universal Resource Identifier 统一资源标志符

URL = Universal Resource Locator 统一资源定位符

URN = Universal Resource Name 统一资源名称

URL 代表资源的路径地址，而 URI 代表资源的名称。

通过 URL 找到资源是对网络位置进行标识，如：

http://example.org/absolute/URI/with/absolute/path/to/resource.txt

ftp://example.org/resource.txt

通过 URI 找到资源是通过对名称进行标识，这个名称在某命名空间中，并不代表网络地址，如：

urn:issn:1535-3613