什么是Data URI？

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时，需要权衡其优缺点，并根据实际情况进行选择。