我注意到一些浏览器(特别是Firefox和Opera)非常热衷于使用.css和.js文件的缓存副本，甚至在浏览器会话之间。当您更新其中一个文件时，这会导致一个问题，但用户的浏览器会继续使用缓存的副本。
当文件发生更改时，强迫用户浏览器重新加载文件的最优雅的方法是什么?
理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。
我发现John Millikin和da5id的建议很有用。这有一个专门的术语:自动版本控制。
我在下面发布了一个新的答案，这是我最初的解决方案和约翰的建议的结合。
SCdF建议的另一个想法是将伪查询字符串附加到文件中。(一些自动使用时间戳作为伪查询字符串的Python代码是由pi..提交的)
然而，关于浏览器是否缓存带有查询字符串的文件还存在一些讨论。(请记住，我们希望浏览器缓存该文件并在以后的访问中使用它。我们只希望它在文件更改时再次获取该文件。)
当前回答
ASP。NET我建议以下解决方案与高级选项(调试/发布模式，版本):
以这种方式包含JavaScript或CSS文件:
<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />
全球。JsPostfix和Global。在Global.asax中，CssPostfix的计算方法如下:
protected void Application_Start(object sender, EventArgs e)
{
...
string jsVersion = ConfigurationManager.AppSettings["JsVersion"];
bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);
int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;
JsPostfix = "";
#if !DEBUG
JsPostfix += ".min";
#endif
JsPostfix += ".js?" + jsVersion + "_" + buildNumber;
if (updateEveryAppStart)
{
Random rand = new Random();
JsPosfix += "_" + rand.Next();
}
...
}
其他回答
我将文件内容的MD5哈希值放在其URL中。这样我就可以设置一个很长的过期日期，而不必担心用户使用旧的JS或CSS。
我还在运行时(或在文件系统更改时)对每个文件进行一次计算，因此在设计时或构建过程中没有什么有趣的事情要做。
如果你使用ASP。NET MVC，那么你可以在我的另一个答案中查看代码。
仅在纯JavaScript的本地开发中禁用script.js的缓存。
它会注入一个随机的script.js?Wizardry =1231234并阻塞常规script.js:
<script type="text/javascript">
if(document.location.href.indexOf('localhost') !== -1) {
const scr = document.createElement('script');
document.setAttribute('type', 'text/javascript');
document.setAttribute('src', 'scripts.js' + '?wizardry=' + Math.random());
document.head.appendChild(scr);
document.write('<script type="application/x-suppress">'); // prevent next script(from other SO answer)
}
</script>
<script type="text/javascript" src="scripts.js">
有趣的文章。阅读了这里所有的答案，并结合我从未遇到过任何“伪”查询字符串问题的事实(我不确定为什么每个人都不愿意使用这个)，我猜解决方案(它消除了Apache重写规则的需要，因为在接受的答案)是计算CSS文件内容的短哈希(而不是文件日期时间)作为伪查询字符串。
这将导致以下结果:
<link rel="stylesheet" href="/css/base.css?[hash-here]" type="text/css" />
当然，datetime解决方案也可以在编辑CSS文件的情况下完成工作，但我认为这是关于CSS文件的内容，而不是关于文件datetime，所以为什么要把这些混为一谈呢?
这个解决方案是用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。基本上任何不是动态生成的东西。
谷歌的mod_pagespeed插件将为你自动版本控制。它真的很光滑。
它解析HTML在它的方式从web服务器(与PHP, Ruby on Rails, Python，静态HTML -任何)和重写链接到CSS, JavaScript，图像文件，使他们包括一个id代码。它在修改后的url上提供文件，并对它们进行非常长的缓存控制。当文件更改时，它会自动更改url，因此浏览器必须重新获取它们。它基本上可以正常工作，无需对代码进行任何更改。它甚至还会缩小你的代码。
