我注意到一些浏览器(特别是Firefox和Opera)非常热衷于使用.css和.js文件的缓存副本，甚至在浏览器会话之间。当您更新其中一个文件时，这会导致一个问题，但用户的浏览器会继续使用缓存的副本。
当文件发生更改时，强迫用户浏览器重新加载文件的最优雅的方法是什么?
理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。
我发现John Millikin和da5id的建议很有用。这有一个专门的术语:自动版本控制。
我在下面发布了一个新的答案，这是我最初的解决方案和约翰的建议的结合。
SCdF建议的另一个想法是将伪查询字符串附加到文件中。(一些自动使用时间戳作为伪查询字符串的Python代码是由pi..提交的)
然而，关于浏览器是否缓存带有查询字符串的文件还存在一些讨论。(请记住，我们希望浏览器缓存该文件并在以后的访问中使用它。我们只希望它在文件更改时再次获取该文件。)
当前回答
静态文件的简单解决方案(仅用于开发目的)，使用脚本标记注入将随机版本号添加到脚本URI
<script>
var script = document.createElement('script');
script.src = "js/app.js?v=" + Math.random();
document.getElementsByTagName('head')[0].appendChild(script);
</script>
其他回答
这个解决方案是用PHP编写的，但是应该很容易适应其他语言。
原始的.htaccess正则表达式可能会导致json-1.3.js等文件出现问题。解决方案是只有在结尾恰好有10位数字时才重写。(因为10位数字涵盖了从2001年9月9日到2286年11月20日的所有时间戳。)
首先，我们在.htaccess中使用下面的重写规则:
RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]
现在，我们编写以下PHP函数:
/**
* Given a file, i.e. /css/base.css, replaces it with a string containing the
* file's mtime, i.e. /css/base.1221534296.css.
*
* @param $file The file to be loaded. Must be an absolute path (i.e.
* starting with slash).
*/
function auto_version($file)
{
if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
return $file;
$mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}
现在，无论你在哪里包含你的CSS，从下面更改它:
<link rel="stylesheet" href="/css/base.css" type="text/css" />
:
<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />
这样，您就不必再次修改链接标签，用户将始终看到最新的CSS。浏览器将能够缓存CSS文件，但当您对CSS进行任何更改时，浏览器将看到这是一个新的URL，因此它不会使用缓存的副本。
这也适用于图像、favicons和JavaScript。基本上任何不是动态生成的东西。
我最近用Python解决了这个问题。下面是代码(它应该很容易被其他语言采用):
def import_tag(pattern, name, **kw):
if name[0] == "/":
name = name[1:]
# Additional HTML attributes
attrs = ' '.join(['%s="%s"' % item for item in kw.items()])
try:
# Get the files modification time
mtime = os.stat(os.path.join('/documentroot', name)).st_mtime
include = "%s?%d" % (name, mtime)
# This is the same as sprintf(pattern, attrs, include) in other
# languages
return pattern % (attrs, include)
except:
# In case of error return the include without the added query
# parameter.
return pattern % (attrs, name)
def script(name, **kw):
return import_tag('<script %s src="/%s"></script>', name, **kw)
def stylesheet(name, **kw):
return import_tag('<link rel="stylesheet" type="text/css" %s href="/%s">', name, **kw)
这段代码基本上是将文件时间戳作为查询参数附加到URL。下面函数的调用
script("/main.css")
会导致
<link rel="stylesheet" type="text/css" href="/main.css?1221842734">
当然，这样做的好处是您不必再次更改HTML内容，因为更改CSS文件将自动触发缓存失效。它工作得很好，开销也不明显。
如果你添加session-id作为JavaScript/CSS文件的伪参数，你可以强制“会话范围缓存”:
<link rel="stylesheet" src="myStyles.css?ABCDEF12345sessionID" />
<script language="javascript" src="myCode.js?ABCDEF12345sessionID"></script>
如果需要版本级缓存，可以添加一些代码来打印文件日期或类似内容。如果您正在使用Java，您可以使用自定义标记以一种优雅的方式生成链接。
<link rel="stylesheet" src="myStyles.css?20080922_1020" />
<script language="javascript" src="myCode.js?20080922_1120"></script>
对于Java Servlet环境，可以查看Jawr库。功能页面解释了它是如何处理缓存的:
Jawr will try its best to force your clients to cache the resources. If a browser asks if a file changed, a 304 (not modified) header is sent back with no content. On the other hand, with Jawr you will be 100% sure that new versions of your bundles are downloaded by all clients. Every URL to your resources will include an automatically generated, content-based prefix that changes automatically whenever a resource is updated. Once you deploy a new version, the URL to the bundle will change as well so it will be impossible that a client uses an older, cached version.
该库还可以简化JavaScript和CSS，但如果不需要，可以将其关闭。
一个特定于silverstripe的答案是:http://api.silverstripe.org/3.0/source-class-SS_Datetime.html#98-110:
希望这将帮助使用SilverStripe模板的人，并试图在每次页面访问/刷新时强制重新加载缓存图像。在我的情况下，它是一个GIF动画，只播放一次，因此没有重放后，它被缓存。在我的模板中，我简单地添加了:
?$Now.Format(dmYHis)
添加到文件路径的末尾，以创建唯一的时间戳并强制浏览器将其视为新文件。
