Firefox重复下载SVG精灵表求助：缓存优化或浏览器Bug？

这个问题确实挺闹心的，明明Chrome能好好缓存，Firefox却反复请求，我来给你拆解下解决方案和背后的原因：

一、优先配置正确的缓存头 #

Firefox对带片段标识符（就是#coffee这种后缀）的资源缓存逻辑和Chrome有差异，但只要服务器返回合适的缓存头，就能让它乖乖用缓存：

• 给sprites.svg设置强缓存头：比如Cache-Control: public, max-age=31536000（设置一年有效期，你可以根据自己的文件更新频率调整），同时搭配ETag或Last-Modified头。这样即使Firefox发起多次请求，只要缓存没过期，就会直接读取本地缓存，不会去服务器验证。
• 注意：如果SVG文件内容没变，ETag和Last-Modified不要随便修改，否则会触发浏览器重新请求文件。

二、用预加载或内嵌SVG避免重复请求 #

如果没法修改服务器缓存配置，试试这两种前端方案：

• 预加载精灵表：在页面最顶部添加<link rel="preload" href="sprites.svg" as="image">，提前把SVG文件加载到缓存里，后续的<img>标签请求时就直接用缓存了。
• 内嵌SVG精灵表：把整个sprites.svg的内容用<svg style="display: none;">内嵌到页面中，然后用<svg width="60" height="63"><use href="#coffee"></use></svg>来引用单个精灵。这种方式完全不会有重复请求，因为SVG已经在DOM里了，缺点是会增加初始页面的体积，适合精灵表不大的场景。

三、关于Firefox的Bug问题 #

你提到的Bug 497665确实已经修复，但Firefox处理带片段的资源缓存逻辑和Chrome仍有区别：Chrome会把sprites.svg#coffee和sprites.svg#tea视为同一个资源，只缓存一次；而Firefox早期会把每个片段当成独立资源，现在修复后虽然不会重复下载，但如果缓存头配置不对，可能会发起条件请求（比如带If-Modified-Since头）。

如果你的Firefox每次都从服务器重新下载完整文件，大概率是缓存头配置有问题，不是未修复的Bug。可以打开Firefox开发者工具（F12）的「网络」面板，查看每个sprites.svg请求的响应头：

• 检查Cache-Control、ETag、Last-Modified是否正确
• 看响应状态码是200（重新下载）还是304（命中缓存）
• 确认SVG的Content-Type是image/svg+xml，类型错误也会影响缓存逻辑

内容的提问来源于stack exchange，提问作者Wolfgang