如何使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>