为什么使用数据URIscheme?
基本上问题在于标题。
很多人都有如何创build一个数据URI和其中的问题的问题stackoverflow。
我的问题是为什么使用数据URI?
有什么好处:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
在做:
<img src="dot.png" alt="Red dot" />
我知道在服务器端(也许)有更less的开销,但是使用数据URI 真正的优点和缺点是什么?
根据维基百科 :
优点:
-
embedded式数据不需要HTTP请求和头部stream量,因此,只要将内联内容编码为数据URI的开销小于HTTP开销,数据URI就会消耗更less的带宽。 例如,600字节长的图像所需的base64编码将是800字节,所以如果HTTP请求需要超过200字节的开销,则数据URI将更有效。
-
要传输许多小文件(每个小于几千字节),这可以更快。 TCP转移倾向于缓慢启动。 如果每个文件都需要新的TCP连接,则传输速度受往返时间的限制,而不受可用带宽的限制。 使用HTTP keep-alive改善了这种情况,但并不能完全缓解瓶颈。
-
当浏览安全的HTTPS网站时,networking浏览器通常要求通过安全连接下载网页的所有元素,否则将由于安全和不安全元素的混合而被通知安全性降低。 在configuration错误的服务器上,HTTPS请求比普通的HTTP请求有明显的开销,因此在这种情况下将数据embedded到数据URI中可能会提高速度。
-
Web浏览器通常被configuration为只与域build立一定数量的(通常是两个)并发HTTP连接,所以内联数据为其他内容释放一个下载连接。
-
限制或限制访问外部资源的环境可能会在内容被禁止或不实际的情况下embedded内容。 例如,高级HTML编辑字段可以接受粘贴或插入的图像,并将其转换为数据URI以隐藏来自用户的外部资源的复杂性。 或者,浏览器可以将来自剪贴板的基于图像的数据转换(编码)为数据URI并将其粘贴到HTML编辑字段中。 Mozilla Firefox 4支持此function。
-
可以将多媒体页面作为单个文件进行pipe理。 电子邮件消息模板可以包含图像(用于背景或签名),而图像看起来不是“附件”。
缺点:
-
数据URI不是从其包含的文档(例如CSS或HTML文件)中分别caching的,因此每次包含文档被重新下载时都会下载数据。 内容必须重新编码,并在每次更改时重新embedded。
-
通过版本7的Internet Explorer(截至2011年1月的市场约占15%)缺乏支持。 但是,这可以通过提供浏览器特定的内容来克服。 Internet Explorer 8限制数据URI的最大长度为32 KB。
-
数据包含在一个简单的stream中,许多处理环境(如Web浏览器)可能不支持使用容器(如multipart / alternative或message / rfc822)来提供更高的复杂性,如元数据,数据压缩或内容协商。
-
Base64编码的数据URI的大小是其二进制等效值的1/3。 (但是,如果HTTP服务器使用gzip压缩响应,则此开销将降低至2-3%)数据URI使安全软件过滤内容变得更加困难。
根据其他来源 – 移动浏览器上的数据url显着较慢。
数据URI的一个很好的使用是允许客户端下载已经生成的内容,而不需要借助服务器端的“代理”。 以下是我能想到的一些例子:
- 将canvas元素的输出保存为图像。
- 以CSV格式下载表格
- 下载任何一种在线编辑器的输出(文本,graphics,CSS代码等)
主要是我用这个,如果我不能(出于某种原因)使用CSS精灵 ,我不想下载我将用于样式的每一个小的单一图像。
或者出于某种原因,您不希望任何人链接来自外部页面的图像。 这可以通过其他方法来实现,但也可以embedded工作。
否则,我个人不会将大图像编码为照片。 将媒体放在不同的服务器上更好。 一台服务器可能缺less所有安装的networking服务器相关软件。 简单地提供媒体。 更好地利用资源。
我在几个(C ++,Python)命令行应用程序中使用了数据URIscheme来生成包含数据图的报告 。
有一个单一的文件是非常方便的通过电子邮件发送报告(或一般移动它们)。 与PDF相比,我不需要额外的库(除了一个base64编码例程),我不需要照顾分页符(我几乎从不需要打印这些报告)。 我通常不会把这些报告放在一个Web服务器上,只要用浏览器在本地文件系统上查看它们即可。
我同意BiAiB的观点 ,即数据URI的实际价值是让客户端生成的内容可以作为文件下载而不需要服务器往返。
我的博客中描述了使用数据URI作为“提供CSV表格下载”的工作示例。
恕我直言,出于性能原因将图像(或其他二进制资源)数据embedded到HTML文件中是一种红鲱鱼。 由于较less的HTTP连接,速度增益可以忽略不计,并打破了(文本)标记和二进制资源(图像文件,video等)之间的分离原理。
我认为HTTP 1.1stream水线和对HTTP的一些build议改进是处理HTTPnetworking速度问题的更简洁更好的方法。