(转)dataurischema学习

http://sjolzy.cn/What-is-the-data-URI-scheme-and-how-to-use-the-data-URI-scheme.html



网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数&＃xff0c;例如通过合并多个JS文件&＃xff0c;合并CSS样式文件。除此之外&＃xff0c;还有一个data URL 的密技&＃xff0c;让我们直接把图像的内容崁入网页里面&＃xff0c;这个密技的官方名称是 data URI scheme 。







什么是 data URI scheme&＃xff1f;

假设你有以下的图像&＃xff1a;



A



把它在网页上显示出来的标准方法是&＃xff1a;





这 种取得资料的方法称为 http URI scheme &＃xff0c;同样的效果使用 data URI scheme 可以写成&＃xff1a;



换句话说我们把图像档案的内容内置在 HTML 档案中&＃xff0c;节省了一个 HTTP 请求。



Data URI scheme 的语法

我们来分析一下这句 img 标签的语法&＃xff1a;




在 CSS 中使用 data URL

Data URI scheme 也可以在 CSS 中使用&＃xff0c;例如&＃xff1a;



body { background-image: url("https://img-blog.csdnimg.cn/2022010622353176626.png");}浏 览器会缓存这种图像吗&＃xff1f;

不会&＃xff0c;Data URL 虽然节省 HTTP 请求&＃xff0c;但是倘若这个图像要在网页多个地方显示的话&＃xff0c;便会加大网页的内容&＃xff0c;延长了下载的时间&＃xff0c;其中一个解决办法是在一个 CSS class 中加入 data URL&＃xff0c;在需要显示图像的区块调用这个 class&＃xff0c;例如&＃xff1a;



.logobg {

background: url(data:…)

}