网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件。浏览器每下载一个图档或CSS就会触发一个HTTP request,而每个HTTP流程都会额外产生HTTP Header、TCP/IP Header等资料量,data URI scheme则是将文件Base64编码内嵌在网页中不额外触发HTTP request,Page speed更快速有效率。除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网页里面,这个密技的官方名称是 data URI scheme 。
假设你有以下的图像:A
把它在网页上显示出来的标准方法是: <img src="http //sjolzy cn/images/A.png"/>
这 种取得资料的方法称为 http URI scheme ,同样的效果使用 data URI scheme 可以写成:
<img src="data:image/png;base64,iVBORw0KGgoAAAAN......" />
换句话说我们把图像档案的内容内置在 HTML 档案中,节省了一个 HTTP 请求。
Data URI scheme 的语法
我们来分析一下这句 img 标签的语法:<img src="data:image/png;base64,iVBOR....>
它包含一下部分:
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
body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhE.......CC");}
缺点
Base64会使文件内容增加约33%
data URI不会被浏览器缓存
如果有需要在多个地方重复使用时请避免或使用CSS载入
内容如果更新,就需要重新产生一次编码
data URI会使CSS和HTML看起来变得凌乱
大小限制,根据data URI的规范,data URI有字元的限制,IE8仅支援32768 Bytes,约32KB左右
IE8以下不支援,但可以透过使用CSS Hack解决
Data URI scheme 实现数据的URI访问
最新推荐文章于 2022-04-20 15:23:46 发布