很多人都知道，在网页开发中减少HTTP请求的次数，例如把多个 JavaScript 文件合并，把多个 CSS 文件合并，利用 CSS Sprite 合并的小图示等等，能优化网页性能。但是很多人都不知道还有一个 data URL 的密技，可以在网页中嵌入小文件。

Data URI scheme 简介

Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。

目前，Data URI scheme支持的类型有：

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:image/png;base64,base64编码的png图片数据

data:image/jpeg;base64,base64编码的jpeg图片数据

data:image/x-icon;base64,base64编码的icon图片数据

base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具。目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

举个栗子

假设你有一个图像，把它在网页上显示出来的标准方法是：

<img src="images/logo.png"/>

这种方式中，img标记的src属性指定了一个远程服务器上的资源。当网页加载到浏览器中 时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求，占用网络资源。大多数的浏览器都有一个并发请求数不能超过4-10个的限制。这意味着，如果一个网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。上述方法称为 http URI scheme，同样的效果使用 data URI scheme 可以写为：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA

7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />

我们把图像文件的内容内置在HTML文档中，节省了一个HTTP请求。

Data URL优劣场合

Data URL能用在很多场合，跟传统的外部资源引用方式相比，它有如下独到的用处：

• 当访问外部资源很麻烦或受限时。

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

当图片的体积太小，占用一个HTTP会话不是很值得时。

Data URL也有一些不适用的场合：

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

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