在 HTML 和 CSS 中使用数据 URI 的优点和缺点是什么？

Question

可以像这样在 HTML 和 CSS 中对图像进行加密，而不是链接来自外部资源的图像：

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

或

body {
    background: url(data:image/png;base64,R0lGODlhEAAQAM...);
}

与通常的链接相比，有哪些优点和缺点？对于高性能网站来说，什么更可取？此功能跨浏览器的支持程度如何？

Answer 1

DataURI 而不是文件中的外部资源

优点

• 缓存在程序中，是最快的
• 更快的加载时间和更少的服务器请求
• 随时随地离线工作
• 中间没有人
• 数据不会丢失
• 加载事件触发得更快
• 有效！最大长度为2GB

缺点

• 大文件
• 代码被很长的字符串弄乱了
• 整体数据大小扩展约33%
• 外部服务器无法更新数据URI
• 需要工具或Javacript来获取DataURI
• DOMContentLoaded 事件被延迟
• 下载量较大，访问者体验较慢
• 在移动设备上； 比源链接慢 6 倍

DataURI 本质上是一个 Base64 字符串。 Base64 古里说：

优点

1. 加快页面加载速度，因为浏览器不会受到最大并发HTTP请求数的限制。
2. 减少服务器负载，因为浏览器仅发出一个 HTTP 请求。因此，服务器可以同时为更多客户端提供服务。
3. 提供简单的热链接保护，因为没有人可以直接从您的服务器将图像嵌入到其页面上。
4. 使页面独立于外部文件，让您即使离线也可以轻松共享它们。
5. 提高性能（初步测试表明浏览器需要更少的CPU）。

缺点

1. Base64 编码数据的大小增长了 33%。
2. 即使页面发生了最小的更改，浏览器也必须重新缓存并重新加载所有图像。
3. 图像编辑困难，因为你首先需要解码 Base64 字符串。
4. 调试起来比较困难，尤其是Base64字符串很长。
5. 忽略禁用图像的用户设置以节省互联网带宽使用。
6. 即使当前页面没有使用图像，它也总是占用空间。
7. 与图像不同，样式表会阻止网页渲染。