data URI scheme

发布时间:2017-3-2 3:56:46 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"data URI scheme ",主要涉及到data URI scheme 方面的内容,对于data URI scheme 感兴趣的同学可以参考一下。

data URI scheme

优化网页效能,首要的任务是尽量减少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

上一篇:Tensorflow学习笔记(一):MNIST机器学习入门
下一篇:html基础知识总结2

相关文章

关键词: data URI scheme

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

最近更新