文章目录
一、基本介绍
Data-URL
:是以data:
为前缀,特殊格式的URL,可以将小文件嵌入在文档中。
js
/*
mediatype:表明数据类型,如image/jpeg表示一个jpeg图片文件,默认值为:text/plain;charset=US-ASCII
encoding:数据编码方式(默认US-ASCII,BASE64两种)
data:编码后的数据
*/
data:[mediatype][encoding],data
mediatype
:
类型 | 描述 | 示例 |
---|---|---|
text | 普通文件 | text/plain,text/html,text/css,text/javascript |
image | 图像文件 | image/gif,image/png,image/jpeg,image/bmp,image/webp,image/x-icon,image/vnd.microsoft.icon |
audio | 音频文件 | audio/midi,audio/mpeg,audio/webm,audio/ogg,audio/wav |
video | 视频文件 | video/webm,video/ogg |
application | 二进制数据 | application/octet-stream,application/pkcs12,application/vnd.mspowerpoint,application/xhtml+xml,application/xml,application/pdf |
- 示例:先将文件转成base64编码,再通过Data URL,我们把图像内容内置在HTML 中。
html
<!-- 常规url -->
<img src="http://csdn.com/img/test.jpg">
<!-- dataurl -->
<img src="data:image/png;base64,alsdkfj...">
二、优点缺点
优点:
-
减少 HTTP 请求,例如图片体积小,这是还占用一个请求就不值得
-
能够在离线情况下访问,而不依赖于外部资源的可用性
缺点:
- Base64 编码后的数据体积 会比 原数据的体积大
- Data URL 形式的图片不被浏览器缓存,每次访问页面时都会重新下载一次。
- 由于 Base64 跟 CSS 混在一起,增加了浏览器解析CSS树的耗时
- IE678 存在兼容性问题
- 不适合懒加载,可读性差,也不利于维护