html - 为什么要使用数据 URI 方案？

Question

基本上问题在标题中。

很多人都对如何创建数据 URI 和其中存在的问题提出了疑问。

我的问题是为什么要使用数据 URI？

这样做有什么好处:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

过度:

<img src="dot.png" alt="Red dot" />

我知道服务器端的开销较少(可能)，但是使用数据 URI 的真正优势/劣势是什么？

Answer 1

根据 Wikipedia :

优点:

• 嵌入数据不需要 HTTP 请求和 header 流量，因此每当编码开销增加时，数据 URI 消耗的带宽更少作为数据 URI 的内联内容比 HTTP 开销小。比如一张600字节长的图片所需的base64编码将是 800 字节，所以如果 HTTP 请求需要超过 200字节的开销，数据 URI 会更有效率。

• 对于传输许多小文件(每个文件小于几千字节)，这会更快。 TCP 传输往往启动缓慢。如果每个文件都需要一个新的 TCP 连接，则传输速度受限于往返时间而不是可用带宽。使用 HTTP keep-alive 可以改善这种情况，但可能无法完全缓解瓶颈。

• 浏览安全的 HTTPS 网站时，网络浏览器通常要求通过安全连接下载网页的所有元素，否则用户会收到安全和不安全元素混合导致安全性降低的通知。在配置不当的服务器上，HTTPS 请求比普通 HTTP 请求有显着的开销，因此在这种情况下将数据嵌入数据 URI 可能会提高速度。

• Web 浏览器通常配置为只生成特定数量(通常是两个)到一个域的并发 HTTP 连接，所以内联数据释放了其他内容的下载连接。

• 对外部资源的访问受限或限制的环境可以在不允许或不切实际的情况下嵌入内容它在外部。例如，高级 HTML 编辑字段可以接受粘贴或插入的图像并将其转换为数据 URI向用户隐藏外部资源的复杂性。或者，浏览器可以将基于图像的数据从剪贴板到数据 URI 并将其粘贴到 HTML 编辑字段中。Mozilla Firefox 4 支持此功能。

• 可以将多媒体页面作为单个文件进行管理。电子邮件消息模板可以包含图像(用于背景或签名)没有图像看起来像“附件”。

缺点:

• 数据 URI 不会与其包含的文档分开缓存(例如 CSS 或 HTML 文件)所以每次下载数据包含文件被重新下载。内容必须重新编码并且每次进行更改时都会重新嵌入。

• Internet Explorer 到第 7 版(截至 2011 年 1 月约占市场的 15%)缺乏支持。然而，这可以通过提供浏览器特定内容来克服。Internet Explorer 8 将数据 URI 的最大长度限制为 32 KB。

• 数据以简单流的形式包含，许多处理环境(例如网络浏览器)可能不支持使用容器(例如 multipart/alternative 或 message/rfc822)来提供更大的复杂性，例如元数据、数据压缩，或内容协商。

• Base64 编码的数据 URI 的大小比其二进制大 1/3相等的。 (但是，如果 HTTP服务器使用 gzip 压缩响应)数据 URI 使它更安全软件很难过滤内容。

根据 other sources - 移动浏览器上的数据 URL 明显变慢。