如何使Web浏览器缓存内容失效

Question

我一直在深入研究Google页面速度，优化了我正在处理的很多网站以获得良好的评分，而且我很自豪地说做得非常成功。

唯一的缺点是，由于某些缓存操作，对JS和CSS进行小的更改通常不会导致文件的新下载副本。

当JS、CSS（或其他资源）发生更改时，是否有任何方法强制下载新的副本呢？

- Keefer

---

你的HTTP服务器支持ETag吗？ - MyItchyChin

不确定。我怎么确定呢？ - Keefer

Answer 1

我有时会遇到 JS 和 CSS 缓存时间过长的类似问题。对我有效的解决方案是，在文件名后作为查询字符串添加版本号或最后更新的时间戳。这样浏览器会将文件视为已更改并重新下载它。

获取 JS 的示例：

http://yourdomain.com/content/js/functions.js?v=201232

- Rob

---

针对 Android 2.2 及以下版本，我发现这会导致程序崩溃。 - Petrogad

Answer 2

我知道这可能显而易见，因为您可以了解到“版本控制”技术用于使任何静态资源请求失效，但如果不是这样，我会在这里提供帮助。

我们允许某些应用进行品牌推广，这意味着在客户与我们合作期间，图像文件很常见地发生变化，以及其他之前提到的静态文件。如果相同的名称用于文件，缓存将成为一个问题。方便的是，对图像源进行版本控制的想法同样有效。

<img src="images/title.gif?v=2" />

此外，可能没有必要提到，但在这方面，“使缓存失效”这个术语在技术上并不正确。使缓存失效是指删除缓存条目。实际上，并没有真正的程序方式可以为浏览器做到这一点。我们在这里讨论的实际上是由于文件名更改而向Web服务器请求新文件，而不是强制删除原始文件。您可以通过在未使用的版本和旧版本之间来回更改文件版本，并分别查看HTTP 200和304响应来轻松测试此内容。

- AlienFromCA

Answer 3

看一下HTML5 Boilerplate。http://html5boilerplate.com/它可以自动处理你所担心的很多事情，并且通过在每次修改时使用不同命名的CSS文件来处理缓存失效。

捆绑的.htaccess文件中的相关片段：

# ----------------------------------------------------------------------
# | Filename-based cache busting                                       |
# ----------------------------------------------------------------------

# If you're not using a build process to manage your filename version
# revving, you might want to consider enabling the following directives
# to route all requests such as `/style.12345.css` to `/style.css`.
#
# To understand why this is important and even a better solution than
# using something like `*.css?v231`, please see:
# https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# <IfModule mod_rewrite.c>
#     RewriteEngine On
#     RewriteCond %{REQUEST_FILENAME} !-f
#     RewriteRule ^(.+)\.(\w+)\.(bmp|css|cur|gif|ico|jpe?g|m?js|png|svgz?|webp|webmanifest)$ $1.$3 [L]
# </IfModule>

- jmh