Performance HTTP缓存、浏览器差异

尊敬的堆栈溢出器

因此，我最近一直试图完全了解HTTP资源缓存。值得注意的是，现在我只看一个sprited图像的缓存，它用于在整个页面中呈现图标/小图像。以下是我看到的奇怪行为的解释：

因此，在给定的页面上，我只有一个图像：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显示了对sprited图像的四个成功请求=什么！？后续请求会导致一次缓存命中，但第一次加载包含四个并发请求。这似乎是一个相当大的wtf，因为它似乎绕过了spriting的整个要点，即减少给定页面加载周期中资源请求的绝对数量

可能发生的情况：

页面加载速度足够快，当第二个元素呈现到使用精灵背景图像的文档时，精灵的第一个请求尚未完成。因此，如果资源尚未缓存，则在呈现后续元素时，它们会导致对资源的新请求，即使资源已被加载。Safari以某种方式处理和防止这种情况（我知道Safari的缓存实践与其他浏览器有些不同）

所以，我在这里寻找一些确认/输入。对于这些浏览器来说，这是否“如预期的那样工作”——此外，它是否否定了与spring相关的性能提升（这会带来css维护的复杂性）？或者，我是不是做错了什么

我感谢你的想法/建议

干杯

---

Skone

你对形势的分析似乎朝着正确的方向发展。以下是我的一些想法：

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

第二，Safari只打一个电话吗？还是只报告一次成功呼叫？也就是说，Safari对给定的资源发出4个请求，第一个请求完成，因此其余的请求将被忽略而不报告

第三，狩猎是不是更快？在Safari中尝试放大图片或通过慢速连接下载，看看它是否与其他浏览器存在相同的“问题”

最后，我一般不认为这否定了使用精灵的性能提升。sprite确实可以在有10个或100个图像的情况下提供帮助，从而减少http请求。如果你对少量图像（例如5-10个）使用精灵，在这种情况下几乎没有意义

---

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

因此，在大量咀嚼之后，我想出了解决问题的方法

比如说，我创建了一个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;
}

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

无论如何，希望这对另一个精灵有用

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

我意识到这可能不是一个明确的bug，但在一个浏览器竞相被贴上最快标签的时代，这似乎是Firefox的一个潜在改进

你们觉得呢，我应该把这个作为bug提交给Mozilla吗