在javascript中包含base64 gzipped样式表/图像?

时间:2012-01-28 20:56:07

标签: javascript base64 mime-types data-uri data-uri-scheme

我知道你可以包含css和图像,以及其他文件类型,这些文件类型已经在javascript文件中以base64形式存储。然而,这些都是相当庞大的...并且gzip,它们缩小了很多,即使从base64编码的开销约为33%。

非gzip,图像是数据:image / gif; base64,data:image / jpeg,data:image / png,css是data:text / css; base64。我可以/应该使用什么mime类型,然后,包括gzip的css或图像数据URI? (或者如果gzip + base64无法工作,我是否可以做任何其他压缩来降低字符串的大小,同时仍保持数据存储在javascript中?)

.. ..编辑 我认为这个问题被误解了。我不是要求如果我应该在javascript中包含gzip压缩的base64字符串。是的,我知道在大多数情况下,最好是在服务器端gzip javascript和其他文件。但这不适用于用户;用户脚本没有服务器,只包含一个文件。 Firefox允许使用@require指令,但Opera和Chrome不支持,并且本地文件安全问题会在加载任何本地文件时发挥作用。因此,脚本所需的任何东西都必须是:1)在web上(慢)或2)嵌入在用户脚本中(大)。

现在这个问题假设大的比较慢,但是大的并不意味着我们完全忽略了多大;如果它可以更小,这是一个改进。

因此,假设在javascript中嵌入了base64字符串,问题是如何将其变为有意义的东西。

或者:

1)atob()可以在javascript中将原始base64编码的gzip转换为raw gzip。 (atob不需要知道mediatype)。接下来的问题是如何解压缩原始gzip压缩文件或图像文件,以便将结果输出输入到文档中。

或2)给定适当的媒体类型,浏览器至少在理论上(根据datauri RFC)应该能够直接从数据库加载任何文件。 “”足以加载非gzip压缩的CSS样式表。这里的问题是链接类型属性和datauri mediatype组合应该起作用(以及它适用于哪些浏览器)?优选地,对于用户脚本,这将是在Opera,FF和Chrome中有效的组合。

1 个答案:

答案 0 :(得分:3)

在HTTP中,压缩通常仅应用于传输以减少要传输的有效负载。这是由Content-Encoding header field完成的。

data URL scheme非常有限,您只能指定媒体类型:

dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data

虽然您可以使用multipart message,但大多数用户代理都不支持data个网址。通过压缩实际有效载荷来描述这种多部分消息的附加数据是否不会超过您安全的数据也是值得怀疑的。

因此,在data URL中压缩数据在理论上是可行的,但是不切实际。最好简单地压缩嵌入data URL的整个文档。