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

Question

基本上问题在于标题.

很多人都有关于如何创建数据URI及其中的问题的stackoverflow问题.

我的问题是为什么要使用数据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

根据维基百科:

好处:

• 嵌入数据不需要HTTP请求和标头流量,因此只要将内联内容编码为数据URI的开销小于HTTP开销,数据URI就会消耗更少的带宽.例如,600字节长的图像所需的base64编码将是800字节,因此如果HTTP请求需要超过200字节的开销,则数据URI将更有效.

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

• 在浏览安全的HTTPS网站时,Web浏览器通常要求通过安全连接下载网页的所有元素,或者由于安全和不安全元素的混合,将通知用户安全性降低.在配置错误的服务器上,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.

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

• Base64编码的数据URI的大小比其二进制等值大1/3.(但是,如果HTTP服务器使用gzip压缩响应,则此开销减少到2-3%)数据URI使安全软件更难以过滤内容.

根据其他消息来源 - 移动浏览器上的数据URL速度明显较慢.

Answer 2

充分利用数据URI允许下载已在客户端生成的内容,而无需借助服务器端的"代理".以下是我能想到的一些例子:

• 将画布元素的输出保存为图像.
• 提供以CSV格式下载表格
• 下载任何类型的在线编辑器的输出(文本,绘图,CSS代码等)