利用浏览器缓存和 CSS 引用图像答案

【问题标题】：Leverage Browser Caching & CSS Referenced Images利用浏览器缓存和 CSS 引用图像
【发布时间】：2012-04-16 19:37:56
【问题描述】：

我在这里的第一篇文章，在这里做了很多阅读，其中一些非常有帮助。然而，尽管有很多关于浏览器缓存的帖子，但似乎没有一个能涵盖我下面的观点。

我一直在更新我们的网站，并且（和许多人一样）遇到了这个与页面速度有关的 Leverage Browser Caching 问题。现在，与其急于求成并更改我们的 .htacess 文件，还不如让用户在几周和几周内看到旧内容，我想我最好做一些阅读，花了半天时间做这些，我现在明白它是什么以及“破坏”缓存”。

我了解，如果我对我的 .css 文件或图像文件进行更改并且我使用了时间戳，它将更新，例如 top_nav.png?123456 更改为 top_nav.png?654321 这将被更新并重新-缓存，因为浏览器会将其视为新资产。

但是，假设我们有一个本身未更新的 .css 文件，但 .css 文件中的其中一个图像已更新并在没有时间戳的情况下被引用，据我所知，浏览器仍会使用缓存版本！我说的对吗？

这是否意味着 .css 文件中的所有图像都带有时间戳，这意味着当图像更新时，实际上 .css 文件也会更新，从而导致浏览器重新加载 .css 文件和图像。

抱歉，这篇文章啰嗦了，我只是想把重点说清楚。

提前致谢，加里。

【问题讨论】：

标签： caching browser

【解决方案1】：

关于强制客户端更新文件的名称更改是正确的。然而，缓存不是递归的；缓存的 .css 文件并不意味着它链接到的图像或其他内容也被缓存。

例如，假设我的 .htaccess 文件中有这个：

<filesMatch "\.(xml|txt|js|css)$">
    Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesMatch>

用户请求 index.html，它引用了一个 css 文件。该 css 文件还引用了一些背景 .jpg 图像。如果用户之前访问过该页面，则 css 文件会被缓存，但 .jpg 图像将被重新加载，因为它们未在 .htaccess 中设置为缓存。

【讨论】：

嗨@erikreed，谢谢你的回复，我猜这是一种方法。但是，如果我确实缓存了添加 png|jpg| 的图像文件怎么办？等是否会缓存css引用的图像..？然后提出问题，更新 css 文件会导致所有引用的图像都被更新..？
是的，添加png|jpg 会导致图片在css中被引用时被缓存。如果之前将它们设置为缓存，更新 css 不会导致更新引用的图像——它不是递归的。