我注意到一些浏览器(特别是Firefox和Opera)非常热衷于使用.css和.js文件的缓存副本，甚至在浏览器会话之间。当您更新其中一个文件时，这会导致一个问题，但用户的浏览器会继续使用缓存的副本。
当文件发生更改时，强迫用户浏览器重新加载文件的最优雅的方法是什么?
理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。
我发现John Millikin和da5id的建议很有用。这有一个专门的术语:自动版本控制。
我在下面发布了一个新的答案，这是我最初的解决方案和约翰的建议的结合。
SCdF建议的另一个想法是将伪查询字符串附加到文件中。(一些自动使用时间戳作为伪查询字符串的Python代码是由pi..提交的)
然而，关于浏览器是否缓存带有查询字符串的文件还存在一些讨论。(请记住，我们希望浏览器缓存该文件并在以后的访问中使用它。我们只希望它在文件更改时再次获取该文件。)
当前回答
谷歌的mod_pagespeed插件将为你自动版本控制。它真的很光滑。
它解析HTML在它的方式从web服务器(与PHP, Ruby on Rails, Python，静态HTML -任何)和重写链接到CSS, JavaScript，图像文件，使他们包括一个id代码。它在修改后的url上提供文件，并对它们进行非常长的缓存控制。当文件更改时，它会自动更改url，因此浏览器必须重新获取它们。它基本上可以正常工作，无需对代码进行任何更改。它甚至还会缩小你的代码。
其他回答
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();
}
...
}
对于在开发和测试时遇到此问题的开发人员:
简单地删除缓存。
“保持缓存与文件一致”..太麻烦了。
一般来说，我不介意加载更多的文件——甚至在大多数项目中加载没有改变的文件——实际上是无关紧要的。在开发应用程序时，我们主要从磁盘加载，在localhost:port上加载，因此网络流量的增加不是一个棘手的问题。
大多数小项目只是玩玩而已——它们从来没有真正投入生产。所以对他们来说，你不需要更多的东西……
因此，如果你使用Chrome DevTools，你可以遵循如下图所示的禁用缓存方法:
如果你有Firefox缓存问题:
只在开发过程中这样做。你还需要一种机制来强制重新加载用于生产，因为如果你频繁地更新你的应用程序，你的用户将使用旧的缓存失效的模块，而你没有提供一个专门的缓存同步机制，就像上面的答案中描述的那样。
是的，这个信息已经在以前的答案中，但我仍然需要做谷歌搜索才能找到它。
如果你添加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>
您可以使用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>
我建议您使用实际CSS文件的MD5散列，而不是手动更改版本。
URL应该是这样的
http://mysite.com/css/[md5_hash_here]/style.css
您仍然可以使用重写规则来去除散列，但优点是现在您可以将缓存策略设置为“永远缓存”，因为如果URL相同，这意味着文件没有改变。
然后，您可以编写一个简单的shell脚本来计算文件的散列并更新标记(您可能希望将其移动到一个单独的文件中进行包含)。
只要在CSS每次更改时运行该脚本就可以了。浏览器只会在文件被修改时重新加载。如果你做了一个编辑，然后撤销它，为了让你的访问者不重新下载，你不需要确定需要返回到哪个版本。
