什么是 Data URL
Data URL 是前缀为 data: 协议的 URL，允许在 URL 中直接嵌入数据，与常见的 URL（如 https://）不同，Data URL 不指向外部资源，而是直接包含数据内容。这种方式可以用于在网页或应用程序中内联小型的文件或数据片段，而无需从外部服务器加载。这种协议常用于网页、演示文档或者应用中嵌入小片段的 Markdown 文本而无需访问外部文件。
举个例子，你可以直接在网页中打开下面的链接，打开之后会在网页上展示一段 markdown 文本
data:text/markdown;base64,IyMgSGVsbG8gV29ybGQKVGhpcyBpcyBhIG1hcmtkb3duIHRleHQK
展示的内容为
## Hello World
This is a markdown text
Data URL 格式
典型的 Data URL 格式如下：
data:[<MIME-type>][;base64],<data>
MIME-type: 数据的媒体类型，如text/html、image/png、text/markdown等。base64: 如果数据经过 Base64 编码，该部分会包含;base64。<data>: 实际的数据，可以是文本或二进制内容。
还是以上面的例子介绍一下
对于 Data URL data:text/markdown;base64,IyMgSGVsbG8gV29ybGQKVGhpcyBpcyBhIG1hcmtkb3duIHRleHQK, 其实是内嵌的 Markdown 文本文件，它使用 text/markdown 作为媒体类型，数据部分采用base64编码，也就是将 markdown文本使用 base64 进行压缩。不过不用担心在浏览器中展示的是编码后的base64编码，浏览器会自己解码，最终展示的是解码之后的markdown文本。
当然你也可以不使用base64进行压缩，但是需要进行 urlEncode，像下面这样，在浏览器中打开的效果是一样的
data:text/mardkwon,%23%23+Hello+World%0aThis+is+a+markdown+text%0a
使用场景
其实这个东西并不陌生，比如我们在网页中使用base64 编码展示图片用的就是这个协议
.example {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...);
}
下面整理了几个比较常用的场景
1. 内嵌图像资源
- 使用场景: 为了避免在加载页面时额外的 HTTP 请求，将小型图像、svg 图标直接嵌入 HTML 或 CSS 中。
- 示例: 在 CSS 中嵌入背景图像：
.logo {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...);
}
- 好处: 减少网络请求次数，提升网页加载速度，尤其在网络环境不佳的情况下很有帮助。
2. Web 应用中做文件导出
- 使用场景: 某些场景中提供一些小文件的下载链接。
- 示例：比如导出 JSON 文件：
<a href="data:application/json;base64,eyB0aXRsZTogJ2hlbGxvIHdvcmxkJyB9" download="data.json">JSON</a>
- 好处: 无需依赖服务器生成文件，前端可以动态生成文件并提供下载。
3. 前端演示或沙盒应用
- 使用场景: 在需要在线编辑和预览文件的应用中，可以使用 Data URL 来生成实时预览。
- 示例: 比如展示 markdown 文本。
<iframe src="data:text/markdown;base64,SGVsbG8gd29ybGQhIFRoaXMgaXMgYSBtYXJrZG93biB0ZXh0Lg==" />
- 好处: 无需将内容发送到服务器，即可在本地生成实时预览。
4. 简易的网页应用
- 使用场景: Data URL 可以用于创建完全独立的网页应用或演示文件，不需要任何外部服务器资源，甚至可以离线运行。在一些特殊的情况下，网络不可用或不便于发送请求，Data URL 可以作为替代方案，提供本地渲染或数据存储的解决方案。
- 示例: 使用 Data URL 创建一个简单的组件预览页，你可以复制下面的 base64 到浏览器打开，可以看到一个按钮组件的预览页面
data:text/html;base64,PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9InpoIj4KPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+CiAgICA8dGl0bGU+5oyJ6ZKu54q25oCB56S65L6LPC90aXRsZT4KICAgIDxzdHlsZT4KICAgICAgICBib2R5IHsKICAgICAgICAgICAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmOwogICAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICAgICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgICAgICAgaGVpZ2h0OiAxMDB2aDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2Y0ZjRmNDsKICAgICAgICB9CgogICAgICAgIC5idXR0b24gewogICAgICAgICAgICBwYWRkaW5nOiAxNXB4IDMwcHg7CiAgICAgICAgICAgIGZvbnQtc2l6ZTogMTZweDsKICAgICAgICAgICAgY29sb3I6IHdoaXRlOwogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDA3YmZmOwogICAgICAgICAgICBib3JkZXI6IG5vbmU7CiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDVweDsKICAgICAgICAgICAgY3Vyc29yOiBwb2ludGVyOwogICAgICAgICAgICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MsIHRyYW5zZm9ybSAwLjJzOwogICAgICAgICAgICBtYXJnaW46IDEwcHg7CiAgICAgICAgfQoKICAgICAgICAuYnV0dG9uOmhvdmVyIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzAwNTZiMzsKICAgICAgICB9CgogICAgICAgIC5idXR0b246YWN0aXZlIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzAwNDA4NTsKICAgICAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwLjk1KTsKICAgICAgICB9CgogICAgICAgIC5idXR0b246ZGlzYWJsZWQgewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjYzBjMGMwOwogICAgICAgICAgICBjdXJzb3I6IG5vdC1hbGxvd2VkOwogICAgICAgIH0KICAgIDwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+CgogICAgPGJ1dHRvbiBjbGFzcz0iYnV0dG9uIj7mraPluLjnirbmgIE8L2J1dHRvbj4KICAgIDxidXR0b24gY2xhc3M9ImJ1dHRvbiIgb25tb3VzZW92ZXI9InRoaXMuaW5uZXJIVE1MPSfmgqzlgZznirbmgIEnIiBvbm1vdXNlb3V0PSJ0aGlzLmlubmVySFRNTD0n5q2j5bi454q25oCBJyI+5oKs5YGc54q25oCBPC9idXR0b24+CiAgICA8YnV0dG9uIGNsYXNzPSJidXR0b24iIG9ubW91c2Vkb3duPSJ0aGlzLmlubmVySFRNTD0n5oyJ5LiL54q25oCBJyIgb25tb3VzZXVwPSJ0aGlzLmlubmVySFRNTD0n5q2j5bi454q25oCBJyI+5oyJ5LiL54q25oCBPC9idXR0b24+CiAgICA8YnV0dG9uIGNsYXNzPSJidXR0b24iIGRpc2FibGVkPuemgeeUqOeKtuaAgTwvYnV0dG9uPgoKPC9ib2R5Pgo8L2h0bWw+Cg==
- 好处:
-
- 在一些特殊的情况下，网络不可用或不便于发送请求，Data URL 可以作为替代方案，提供本地渲染或数据存储的解决方案。
- 对于一些需要可视化交流的内容能够提升用户体验。
其他
兼容性
从 MDN 看 Data URL 的兼容性还是不错的 Data URL | MDN (mozilla.org)
安全性
浏览器会将 Data URL 视为唯一的不透明来源，意味着浏览器将 Data URL 视为一种安全策略，限制了这些 URL 在某些场景下的使用，比如你无法通过window.open打开 Data URL，你也无法通过 fetch请求 Data URL，就连localstorage也无法访问。
可以传输的数据大小
实际还没有进行测试，如果 MDN 上描述的没有问题，那这个数据量也是很惊人的
查阅一些资料后，有一些文章中提到限制是：
- Google Chrome: 大约 2 MB
- Firefox: 大约 2 MB
- Safari: 大约 650 KB
- Microsoft Edge: 大约 2 MB
总结一下
优势：
- 减少网络请求: 减少了对服务器的请求，优化了页面加载速度。
- 独立性: 数据和资源可以完全内嵌，确保内容独立于外部服务器。
局限
- 文件大小限制: 浏览器对 Data URL 的大小有限制，通常不能超过 2 MB。
- 可维护性差: 内嵌数据不容易维护，尤其是当嵌入的内容较大或复杂时候，不像在线应用那样可以在线更新。
- 不利于 SEO: 如果过多使用 Data URL，尤其是在 HTML 中，可能会对搜索引擎优化（SEO）不利，因为外部引用的资源更容易被索引。
