data URI scheme

时间：2023-03-08 17:31:23

优化网页效能，首要的任务是尽量减少HTTP请求（http request）的次数，例如把多个JavaScript文档合并，多个CSS文件合并等等。此外，还有有一种 data URL 的方法，可以直接把图像的内容嵌入到网页里面，官方名称是 data URI scheme。

什么是 data URI scheme？

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

<img src="http://www.hkpug.net/files/images/check.png"/>

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

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

7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />

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

几乎所有的现代浏览器都支持Data URL格式，包括火狐浏览器，谷歌浏览器，Safari浏览器，opera浏览器。IE8也支持，但有部分限制，IE9完全支持。

Data URI scheme 的语法

我们来分析以下下面img标签的语法：

<img src="data:image/png;base64,iVBOR....>

它包含一下部分：

data -取得数据的协定名称

image/png - 数据类型名称

base64 - 数据的编码方法

iVBOR.... - 编码后的数据

: , ; - data URI scheme 指定的分隔符号

Base64 编码

简单的说它把一些8-bit的数据翻译成标准ASCII字符，网上有许多base64编码和解码的工具，也可以使用PHP的base64_encode()进行编码：

echo base64_encode(file_get_contents('check.png'));

Data URL适用场合

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

  • 当访问外部资源很麻烦或受限时
  • 当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时。
  • 当图片的体积太小，占用一个HTTP会话不是很值得时。

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

  • Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3。
  • Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。

在 CSS 中使用 data URL

Data URI scheme 也可以在 CSS 中使用，例如：

body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA

7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}

浏览器会缓存这种图像吗

不会，Data URL虽然节省HTTP请求，但是假如这个图像需要在网页的多个地方显示的话，便会加大网页的内容，延长下载的时间。解决方法是在一个CSS class中加入data URL，在需要显示图像的区块调用这个class。

而所有浏览器都会积极的缓存CSS文件来提高页面加载效率。

例如，CSS代码：

.striped_box

  {

  width: 100px;

  height: 100px;

  background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");

  border: 1px solid gray;

  padding: 10px;

  }

HTML代码：

<div class="striped_box lazy ">

这是一个有条纹的方块

</div>

浏览器支持

IE8 以前的版本都不支持data URI scheme

相关文章