最近我一直在努力完全理解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