Data URI，全称为 Data Uniform Resource Identifier，是一种将小型数据文件直接嵌入到HTML、CSS或JavaScript等Web资源中的方案。它允许将数据编码为Base64字符串并包含在URI中，而不是引用外部文件。
基本语法:
data:[<mediatype>][;base64],<data>
data:前缀，表示这是一个Data URI。<mediatype>(可选) 指定数据的MIME类型，例如image/png、text/plain、application/pdf等。如果没有指定，则默认为text/plain;charset=US-ASCII。;base64(可选) 表示数据使用Base64编码。如果不指定，则数据以纯文本形式存在，但仅限于ASCII字符，且某些字符需要进行URL编码。<data>实际的数据内容，如果是Base64编码，则为Base64编码后的字符串；否则为原始数据。
示例:
- 显示一张小红点:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red Dot" />
- 嵌入一段CSS样式:
<style>body {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");}
</style>
- 嵌入一段JavaScript代码:
<script>alert("Hello from Data URI!");
</script><a href="javascript:void(0)" onclick="eval(decodeURIComponent('alert(%22Hello%20from%20Data%20URI!%22)'))">Click me</a>
优点:
- 减少HTTP请求: 将数据直接嵌入到文档中，减少了浏览器需要发出的HTTP请求数量，从而提高页面加载速度。
- 方便快捷: 对于小型数据，使用Data URI可以避免创建单独的文件，简化开发流程。
- 跨域问题: Data URI 不受跨域策略的限制。
缺点:
- 数据大小限制: Base64编码会使数据体积增大约33%，并且浏览器对Data URI的长度也有一定的限制。因此，Data URI不适合大型文件。
- 缓存问题: Data URI 嵌入在文档中，浏览器可能会缓存整个文档，即使只有Data URI中的数据发生了变化。
- 可维护性: 对于较大的数据，直接嵌入到文档中会降低代码的可读性和可维护性。
总结:
Data URI 适用于嵌入小型数据，例如小图标、短文本等。对于大型文件或需要频繁更新的数据，仍然建议使用外部文件。 在使用Data URI时，需要权衡其优缺点，并根据实际情况进行选择。
