http URI scheme与data URI scheme

83 阅读 0 评论 55 点赞

我是靠谱客的博主感动哈密瓜，最近开发中收集的这篇文章主要介绍http URI scheme与data URI scheme，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：data:image/png;base64,　iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/　KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/　LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么这是什么呢？这是Data URI scheme。
　　Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。
　　在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。
　　目前，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图片数据
　　base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，在PHP中可以用函数base64_encode() 进行编码，如echo base64_encode(file_get_contents(‘wg.png’));
目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

因为Url是一种基于文本的协议，所以gif/png/jpeg这种二进制属于需要用base64进行编码。换句话说，引入base64以后，就可以支持任意形式的数据格式。

什么是 data URI scheme？

对优化网页性能有研究的人都知道，首要的任务是尽量减少HTTP请求的次数，例如把多个 JavaScript 文件合并，把多个 CSS 文件合并，利用 CSS Sprite （本空间有介绍）合并的小图示等等，但是很多人都不知道还有一个 data URL 的密技，让我们直接把图像的内容崁入网页里面，这个密技的官方名称是 data URI scheme。

把它在网页上显示出来的标准方法是：
<img src="http://www.XXXX.net/files/images/check.png"/>
这种取得数据的方法称为 http URI scheme，同样的效果使用 data URI scheme 可以写成：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
换句话说我们把图像文件的内容内置在 HTML 文件中，节省了一个 HTTP 请求。
Data URI scheme 的语法
我们来分析一下这句 img 标签的语法：
<img src="data:image/png;base64,iVBOR....>
它包含一下部分：

data:[<mediatype>][;base64],<data>

dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data       := *urlchar
parameter := attribute "=" value

    data - 取得数据的协议名称
    image/png - 数据类型名称
    base64 - 数据的编码方法
    iVBOR.... - 编码后的数据
    : , ; - data URI scheme 指定的分隔符号

Base64 编码？

不知道甚么是 base64 吗？简单地说它把一些 8-bit 数据翻译成标准 ASCII 字符，往上有很多免费的 base64 编码和解码的工具，你也可以用 PHP 的 base64_encode() 进行编码：

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

在 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，例如：
.logobg {
background: url(data:…)
}
<div class=”navigation logobg”>..
helo, hello
<div class=”footer logobg”>…

注意：IE8以前的版本不支持data URI scheme。

这篇文章写的也不错

http://hi.baidu.com/oxid/blog/item/b4346caf709df0f6fbed50b2.html