为什么要使用数据 URI 方案? [英] Why use data URI scheme?

问题描述

基本上问题就在标题中.

Basically the question is in the title.

许多人对如何创建数据 URI 以及其中的问题的 stackoverflow 有疑问.

Many people have had the question stackoverflow of how to create a data URI and problems therein.

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

这样做有什么好处:

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

过度使用:

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

我知道服务器端的开销更少(也许)，但是使用数据 URI 的真正优点/缺点是什么?

I understand one has less overhead on the server side (maybe), but what are the real advantages/disadvantages to using data URI?

推荐答案

根据 维基百科:

优点:

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

• HTTP request and header traffic is not required for embedded data, so data URIs consume less bandwidth whenever the overhead of encoding the inline content as a data URI is smaller than the HTTP overhead. For example, the required base64 encoding for an image 600 bytes long would be 800 bytes, so if an HTTP request required more than 200 bytes of overhead, the data URI would be more efficient.

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

For transferring many small files (less than a few kilobytes each), this can be faster. TCP transfers tend to start slowly. If each file requires a new TCP connection, the transfer speed is limited by the round-trip time rather than the available bandwidth. Using HTTP keep-alive improves the situation, but may not entirely alleviate the bottleneck.

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

When browsing a secure HTTPS web site, web browsers commonly require that all elements of a web page be downloaded over secure connections, or the user will be notified of reduced security due to a mixture of secure and insecure elements. On badly configured servers, HTTPS requests have significant overhead over common HTTP requests, so embedding data in data URIs may improve speed in this case.

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

Web browsers are usually configured to make only a certain number (often two) of concurrent HTTP connections to a domain, so inline data frees up a download connection for other content.

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

Environments with limited or restricted access to external resources may embed content when it is disallowed or impractical to reference it externally. For example, an advanced HTML editing field could accept a pasted or inserted image and convert it to a data URI to hide the complexity of external resources from the user. Alternatively, a browser can convert (encode) image based data from the clipboard to a data URI and paste it in a HTML editing field. Mozilla Firefox 4 supports this functionality.

可以将多媒体页面作为单个文件进行管理.电子邮件消息模板可以包含图像(用于背景或签名)没有图像似乎是附件".

It is possible to manage a multimedia page as a single file. Email message templates can contain images (for backgrounds or signatures) without the image appearing to be an "attachment".

缺点:

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

• Data URIs are not separately cached from their containing documents (e.g. CSS or HTML files) so data is downloaded every time the containing documents are redownloaded. Content must be re-encoded and re-embedded every time a change is made.

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

Internet Explorer through version 7 (approximately 15% of the market as of January 2011), lacks support. However this can be overcome by serving browser specific content. Internet Explorer 8 limits data URIs to a maximum length of 32 KB.

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

Data is included as a simple stream, and many processing environments (such as web browsers) may not support using containers (such as multipart/alternative or message/rfc822) to provide greater complexity such as metadata, data compression, or content negotiation.

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

Base64-encoded data URIs are 1/3 larger in size than their binary equivalent. (However, this overhead is reduced to 2-3% if the HTTP server compresses the response using gzip) Data URIs make it more difficult for security software to filter content.

根据其他来源- 数据网址在移动浏览器上明显变慢.

According to other sources - Data URLs are significantly slower on mobile browsers.

这篇关于为什么要使用数据 URI 方案?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！