0
点赞
收藏
分享

微信扫一扫

(转)data uri schema学习

精进的医生 2022-12-05 阅读 154


​​ http://sjolzy.cn/What-is-the-data-URI-scheme-and-how-to-use-the-data-URI-scheme.html ​​​
网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件。除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网页里面,这个密技的官方名称是 data URI scheme 。



什么是 data URI scheme?
假设你有以下的图像:

A

把它在网页上显示出来的标准方法是:

<img src="http://sjolzy.cn/images/A.png"/>
这 种取得资料的方法称为 http URI scheme ,同样的效果使用 data URI scheme 可以写成:

<img src="https://img-blog.csdnimg.cn/2022010706244749763.png" />换句话说我们把图像档案的内容内置在 HTML 档案中,节省了一个 HTTP 请求。

Data URI scheme 的语法
我们来分析一下这句 img 标签的语法:

<img src="https://img-blog.csdnimg.cn/2022010706244760176.png'check.png'));
在 CSS 中使用 data URL
Data URI scheme 也可以在 CSS 中使用,例如:

body { background-image: url("https://img-blog.csdnimg.cn/2022010706244749763.png");}浏 览器会缓存这种图像吗?
不会,Data URL 虽然节省 HTTP 请求,但是倘若这个图像要在网页多个地方显示的话,便会加大网页的内容,延长了下载的时间,其中一个解决办法是在一个 CSS class 中加入 data URL,在需要显示图像的区块调用这个 class,例如:

.logobg {
  background: url(data:…)
}<div class=”navigation logobg”>..
helo, hello
<div class=”footer logobg”>…又 是 IE 来搞破坏
任何精采的技巧都可能受到 IE 的排挤,这次也有这种情况,IE8 之前的版本都不支援 data URI scheme。

解决这个问题的办法有:使用MHTML 解决 data URI scheme 的浏览器兼容问题

具体做法看代码(肯定是用css hack来实现)

/* 

Content-Type: multipart/related; boundary="_ANY_STRING_WILL_DO_AS_A_SEPARATOR"


--_ANY_STRING_WILL_DO_AS_A_SEPARATOR

Content-Location:the9

Content-Transfer-Encoding:base64


/9j/4AA....+b0//2Q== (这里是base64编码)

*/


#the9{

background-image: url("data:image/png;base64/9j/4AA....+b0//2Q=="); /* normal */

*background-image: url(mhtml:http://www.zhangjingwei.com/demo/scheme/style.css!the9);

width:300px;

height:300px;

color:#F00;

font-weight:900;

}



举报

相关推荐

0 条评论