HTML5 数据 URL(data URL)是什么?

数据 URL（Data URL）是一种特殊的 URL 方案，它允许在网页或应用中嵌入数据，而不是通过外部资源进行引用。数据 URL 的格式使得你可以将数据直接嵌入 HTML、CSS 或 JavaScript 中，从而避免了需要通过额外的 HTTP 请求加载外部资源。

数据 URL 的格式

数据 URL 的基本格式如下：

data:[<mediatype>][;base64],<data>

• data: 是数据 URL 的前缀。
• <mediatype> 是数据的 MIME 类型（例如 text/plain, image/png 等）。如果省略，默认为 text/plain;charset=US-ASCII。
• ;base64 是一个可选的标记，指示数据是以 Base64 编码的。如果省略，则假定数据是 URL 编码的。
• <data> 是实际的数据内容。若使用 Base64 编码，数据会是一个 Base64 编码字符串；若未使用 Base64 编码，则数据是经过 URL 编码的普通文本。

例子;

文本数据: 创建了一个下载链接，点击后可以下载一个包含“Hello World”文本的文件。

<a href="data:text/plain;charset=utf-8,Hello World" download="hello.txt">下载text</a>

图像数据:嵌入了一个 PNG 图像。iVBORw0KGgoAAAANSUhEUgAAAAUA... 是图像数据的 Base64 编码。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..."/>

转换使用

1.  通过在线网站转换

2. 使用编程语言转换

优点:

1. 减少 HTTP 请求: 因为数据直接嵌入，不需要额外的请求去加载资源。
2. 提高性能: 对于小型资源（如小图标或内联样式），可以减少加载时间。

缺点

1. 数据大小限制: 数据 URL 通常适用于小型数据。对于较大的数据，可能导致页面变得冗长，增加加载时间。
2. 兼容性和可维护性: 虽然现代浏览器通常都支持数据 URL，但在一些旧浏览器或特殊环境中可能不完全兼容。