Firefox 下载 SVG 精灵表数百次

Question

我有一个 SVG 精灵表，它使用

<view>

标签来识别每个精灵。要显示精灵，请将

img src

设置为精灵表加上精灵名称作为片段标识符，如下所示：

<img src="sprites.svg#coffee" width="60" height="63" />

我有一个页面，其中包含每个精灵的预览，所以页面上有数百个这样的标签。当我在 Chrome 中查看此页面时，它会下载一次 SVG 文件。然而，当我在 Firefox 中查看它时，文件似乎为每个

<img>

标记下载一次，因此它获得 2MB 的数据而不是 9k 压缩。即使我在浏览器缓存中有文件，似乎one 请求命中缓存，其余请求忽略它并从服务器获取。

是否有我应该知道的缓存标头或标签来防止这种情况发生？或者，这是 Firefox 中的错误吗？我发现的唯一一个是 497665，但它在 8 年前就已解决。

Answer 1

这似乎是一个非常古老的错误，仍然存在 9 年......

https://bugzilla.mozilla.org/show_bug.cgi?id=1027106
https://bugzilla.mozilla.org/show_bug.cgi?id=1121693

一个评论提到了一个可能的解决方法：

如果您使用 SVG 元素而不是 CSS 背景图像，Firefox 只会发出一个请求。也就是说，替换这个 HTML：

<img src="sprite.svg#foo">

使用这个嵌入式 SVG：

<svg><use xlink:href="sprite.svg#foo"/></svg>

（注意 ! 上的结尾“/>”）