HTTP缓存，浏览器差异

Question

尊敬的Stack Overflow用户们，

最近我一直在努力完全理解HTTP资源缓存。特别是，我现在正在研究单个精灵图像的缓存，该图像用于在页面上呈现图标/小图像。以下是我看到的奇怪行为的解释：

在给定的页面上，我只有一个图像：icons.sprite.gif。有四个元素使用该精灵图像在页面上显示各种图标。在我的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中加载页面时，网络检查器只显示对雪碧图的单个请求。这完美地按预期工作。另一方面，在Internet Explorer和Firefox中，Fidder / Firebug显示了四个成功的请求雪碧图像=什么！？随后的请求会导致单个缓存命中，但是第一次加载则包含四个并发请求。这似乎非常让人费解，因为它似乎规避了雪碧化的整体目标，即减少给定页面加载周期中所需资源请求的数量。

可能发生的情况：

当第二个元素被呈现到使用雪碧背景图像的文档中时，页面已经足够快地加载，以至于第一个雪碧资源请求还没有完成。因此，由于该资源尚未被缓存，随着后续元素的呈现，它们会导致对资源的新请求，即使其已经在加载。Safari以某种方式处理并防止了这种情况（我知道Safari的缓存实践与其他浏览器有些不同）。

因此-我正在寻找一些确认/输入。这对这些浏览器来说是“按预期工作”的吗-此外，它是否抵消了与雪碧化相关的性能提升（这确实引入了CSS维护复杂性）？或者，我做错了什么吗？

感谢您的想法/建议。

祝好,

Skone

- Skone

Answer 1

经过大量处理，我找到了解决问题的方法。

比如说，我创建了一个精灵并使用以下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;
}

我意识到这本身更为合适，因为它避免了在精灵元素之间重复背景属性。希望这对另一个制作精灵图的人有用！

编辑：经过一些额外的测试，事实上这只发生在Mozilla Firefox（独立于平台）中。Safari和IE解释相同图像的多个引用并进行单个请求，而Firefox似乎对通过CSS链接的每个图像都进行了唯一请求。

我意识到这可能不会被特别理解为一个bug，但是在浏览器争取被标记为最快的时代 - 似乎对于Firefox来说是一个潜在的改进！

你们认为我应该将此提交给Mozilla作为一个bug吗？

- Skone

Answer 2

您对情况的分析似乎是朝着正确的方向发展的。以下是我几个想法：

首先，最大连接数的概念。不同的浏览器设置不同。与此相关的是，可能会出现Firefox/其他浏览器尝试在多个连接上加载相同的资源，直到其中一个成功为止，而Safari只尝试给定资源的一个连接。

其次，Safari是否仅仅发出了一次调用？还是只报告单个成功的调用？也就是说，Safari为给定资源发出了4个请求，第一个完成后，其余的都被忽略并且不被报告。

第三，Safari只是更快吗？在Safari中尝试较大的图像或通过缓慢的连接下载以查看它是否与其他浏览器具有相同的“问题”。

最后，我通常不认为这会否定使用精灵图所带来的性能提升。精灵图真正的作用是在有几十张或者几百张图片的情况下有所帮助，从而减少http请求数量。如果您只使用5-10张图片的精灵图，那么在这种情况下使用它几乎没有意义。

精灵图除了与http请求无关的另一个好处是减少交互延迟。过去的IE浏览器只有在元素上显示时才下载图像，例如在悬停状态下，这会导致悬停状态出现延迟。而精灵图解决了这个问题。

- Joshua