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

Question

我一直在深入研究Google Page Speed，优化了我正在努力获得的很多网站 - 而且非常成功，我很自豪地说。

我遇到的唯一缺点是，通过一些缓存工作，对JS和CSS的小改动往往不会导致下载文件的新副本。

有什么方法可以对JS，CSS（或其他资源）进行更改以强制下载新副本吗？

Answer 1

我有时遇到类似的问题，JS和CSS被缓存到很长时间。对我有用的解决方案是，将最后一次更新的版本号或时间戳添加到文件名作为查询字符串。通过这种方式，浏览器将文件视为已更改，并将再次下载。

获取JS可能是这样的：

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

Answer 2

我知道这可能是显而易见的，因为你可以收集到无效缓存的“版本控制”技术适用于所请求的任何静态资源，但如果不是，我会在这里进行管道。

我们允许对某些应用程序进行品牌化，这意味着图像文件经常在客户的生命周期中与我们以及之前提到的其他静态文件一起发生变化。如果将相同的名称用于文件，则缓存会出现问题。实际上，对图像源进行版本控制的想法也同样适用。

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

此外，提及这一点可能并不重要，但是，在这方面，术语“使高速缓存无效”在技术上并不正确。要使缓存无效，请删除缓存条目。没有实际的方法可以真正以编程方式为浏览器执行此操作。我们实际上在这里讨论的是，由于文件名称的变化而不是强行删除原始文件，因此要求Web服务器提供新文件。您可以通过在未使用的版本和较旧的旧版本之间来回更改文件版本，并分别查看HTTP 200和304响应来轻松地对此进行测试。

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>