我注意到一些浏览器(特别是Firefox和Opera)非常热衷于使用.css和.js文件的缓存副本，甚至在浏览器会话之间。当您更新其中一个文件时，这会导致一个问题，但用户的浏览器会继续使用缓存的副本。
当文件发生更改时，强迫用户浏览器重新加载文件的最优雅的方法是什么?
理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。
我发现John Millikin和da5id的建议很有用。这有一个专门的术语:自动版本控制。
我在下面发布了一个新的答案，这是我最初的解决方案和约翰的建议的结合。
SCdF建议的另一个想法是将伪查询字符串附加到文件中。(一些自动使用时间戳作为伪查询字符串的Python代码是由pi..提交的)
然而，关于浏览器是否缓存带有查询字符串的文件还存在一些讨论。(请记住，我们希望浏览器缓存该文件并在以后的访问中使用它。我们只希望它在文件更改时再次获取该文件。)
当前回答
您可以简单地添加一些随机数与CSS和JavaScript URL
example.css?randomNo = Math.random()
其他回答
您可以使用SRI来破坏浏览器缓存。你只需要每次都用新的SRI哈希更新index.html文件。当浏览器加载HTML并发现HTML页面上的SRI散列与资源的缓存版本不匹配时，它将从服务器重新加载资源。它还带来了绕过跨起点读阻塞的良好副作用。
<script src="https://jessietessie.github.io/google-translate-token-generator/google_translate_token_generator.js" integrity="sha384-muTMBCWlaLhgTXLmflAEQVaaGwxYe1DYIf2fGdRkaAQeb4Usma/kqRWFWErr2BSi" crossorigin="anonymous"></script>
这是一个纯JavaScript解决方案
(function(){
// Match this timestamp with the release of your code
var lastVersioning = Date.UTC(2014, 11, 20, 2, 15, 10);
var lastCacheDateTime = localStorage.getItem('lastCacheDatetime');
if(lastCacheDateTime){
if(lastVersioning > lastCacheDateTime){
var reload = true;
}
}
localStorage.setItem('lastCacheDatetime', Date.now());
if(reload){
location.reload(true);
}
})();
上面将查找用户最后一次访问您的站点的时间。如果最后一次访问是在发布新代码之前，它使用location.reload(true)强制从服务器刷新页面。
我通常把这作为<head>中的第一个脚本，因此它在任何其他内容加载之前进行评估。如果需要重新加载，用户很难注意到。
我使用本地存储来存储浏览器上最后一次访问的时间戳，但是如果您希望支持旧版本的IE，您可以添加cookie。
仅在纯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">
如果你正在使用Git和PHP，你可以在每次Git存储库中有变化时从缓存中重新加载脚本，使用以下代码:
exec('git rev-parse --verify HEAD 2> /dev/null', $gitLog);
echo ' <script src="/path/to/script.js"?v='.$gitLog[0].'></script>'.PHP_EOL;
在ASP。NET Core你可以通过添加'asp-追加-版本'来实现:
<link rel="stylesheet" href="~/css/xxx.css" asp-append-version="true" />
<script src="~/js/xxx.js" asp-append-version="true"></script>
它将生成HTML:
<link rel="stylesheet" href="/css/xxx.css?v=rwgRWCjxemznsx7wgNx5PbMO1EictA4Dd0SjiW0S90g" />
每当您更新文件时，框架将生成一个新的版本号。
