【前端】DataURL 用法

一、基本介绍

• Data-URL：是以data:为前缀，特殊格式的URL，可以将小文件嵌入在文档中。

/*
	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 中。

<!-- 常规url -->
<img src="http://csdn.com/img/test.jpg">
<!-- dataurl -->
<img src="data:image/png;base64,alsdkfj...">

二、优点缺点

优点：

1. 减少 HTTP 请求，例如图片体积小，这是还占用一个请求就不值得

2. 能够在离线情况下访问，而不依赖于外部资源的可用性

缺点：

1. Base64 编码后的数据体积 会比 原数据的体积大
2. Data URL 形式的图片不被浏览器缓存，每次访问页面时都会重新下载一次。
3. 由于 Base64 跟 CSS 混在一起，增加了浏览器解析CSS树的耗时
4. IE678 存在兼容性问题
5. 不适合懒加载，可读性差，也不利于维护