performance - HTTP 缓存、浏览器差异

Question

尊敬的堆栈溢出者，

所以我最近一直试图完全围绕 HTTP 资源缓存。值得注意的是，现在我只是在查看单个 Sprite 图像的缓存，该图像用于在整个页面中呈现图标/小图像。这是对我所看到的奇怪行为的解释:

所以，在给定的页面上，我只有一个图像:icons.sprite.gif。有四个元素使用 Sprite 在页面上显示各种图标。在我的 Apache 配置中，我安装了 mod_expires 和以下缓存控制指令:

ExpiresActive On
ExpiresDefault "access plus 300 seconds"

ExpiresByType text/html "access plus 1 day"
ExpiresByType text/css "access plus 1 day"
ExpiresByType text/javascript "access plus 1 day"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType application/x-shockwave-flash "access plus 1 day"

现在，奇怪的地方来了。在 Safari 中，当我加载页面时，网络检查器仅显示对 Sprite 的单个请求。这是完美的，按预期工作。另一方面，在 Internet Explorer 和 Firefox 中，Fidder/Firebug 显示了对 Sprite 图像的四个成功请求 = 什么!？后续请求会导致一次缓存命中，但第一次加载包含四个并发请求。这似乎是一个相当大的wtf，因为它似乎绕过了 Sprite 的全部意义，即在给定的页面加载周期中减少资源请求的绝对数量。

可能发生的事情:

页面加载速度足够快，当第二个元素呈现到使用背景图像的文档时，对 Sprite 的第一个请求还没有完成。因此，鉴于资源尚未缓存，随着后续元素的呈现，它们会导致对该资源的新请求，即使它已经被加载。 Safari 以某种方式处理和防止这种情况(我知道 Safari 的缓存做法与其他浏览器有些不同)。

所以 - 我在这里寻找一些确认/输入。对于这些浏览器，这是否“按预期工作”——此外，它是否否定了与 spriting 相关的性能提升(这确实引入了 css 维护复杂性)？或者，我做错了什么吗？

我很欣赏你的想法/建议。

干杯，

斯科内

Answer 1

所以，经过大量的修改后，我想出了如何解决这个问题。

例如，假设我创建了一个 Sprite 并使用 css，如下所示:

.icon { 
   background: transparent url(/media/common/images/sprite.gif) scroll no-repeat 0 -33px;
}

.logo {
   background: transparent url(/media/common/images/sprite.gif) scroll no-repeat 0 -10px;
}

在 firefox 中，这将导致对该图像的两个请求，而不是对图像的单个请求。因此，修复方法是将 css 规则整合如下:

.sprited {
  background: transparent url(/media/common/images/sprite.gif) scroll no-repeat 0 0;
}

.icon { 
   background-position: 0 -33px;
}

.logo {
   background-position: 0 -10px;
}

我意识到这本身更合适，因为它避免了 Sprite 元素之间背景属性的重复。

无论如何，希望这对另一个 Sprite 有用!

编辑 :经过一些额外的测试，这实际上只发生在 Mozilla Firefox(独立于平台)中。 Safari 和 IE 解释对同一图像的多个引用并发出单个请求，而 Firefox 似乎对通过 CSS 链接的每个图像发出唯一请求。

我意识到它可能没有被明确理解为一个错误，但在浏览器竞争最快的时代 - 似乎是 Firefox 的潜在改进!

你们怎么看，我应该将此作为错误提交给 Mozilla 吗？