我注意到一些浏览器(特别是Firefox和Opera)非常热衷于使用.css和.js文件的缓存副本，甚至在浏览器会话之间。当您更新其中一个文件时，这会导致一个问题，但用户的浏览器会继续使用缓存的副本。
当文件发生更改时，强迫用户浏览器重新加载文件的最优雅的方法是什么?
理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。
我发现John Millikin和da5id的建议很有用。这有一个专门的术语:自动版本控制。
我在下面发布了一个新的答案，这是我最初的解决方案和约翰的建议的结合。
SCdF建议的另一个想法是将伪查询字符串附加到文件中。(一些自动使用时间戳作为伪查询字符串的Python代码是由pi..提交的)
然而，关于浏览器是否缓存带有查询字符串的文件还存在一些讨论。(请记住，我们希望浏览器缓存该文件并在以后的访问中使用它。我们只希望它在文件更改时再次获取该文件。)
当前回答
只需使用服务器端代码添加文件的日期…这样，它将被缓存，只有当文件更改时才会重新加载。
在ASP。NET:
<link rel="stylesheet" href="~/css/custom.css?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/css/custom.css")).ToString(),"[^0-9]", ""))" />
<script type="text/javascript" src="~/js/custom.js?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/js/custom.js")).ToString(),"[^0-9]", ""))"></script>
这可以简化为:
<script src="<%= Page.ResolveClientUrlUnique("~/js/custom.js") %>" type="text/javascript"></script>
通过在项目中添加扩展方法来扩展Page:
public static class Extension_Methods
{
public static string ResolveClientUrlUnique(this System.Web.UI.Page oPg, string sRelPath)
{
string sFilePath = oPg.Server.MapPath(sRelPath);
string sLastDate = System.IO.File.GetLastWriteTime(sFilePath).ToString();
string sDateHashed = System.Text.RegularExpressions.Regex.Replace(sLastDate, "[^0-9]", "");
return oPg.ResolveClientUrl(sRelPath) + "?d=" + sDateHashed;
}
}
其他回答
在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" />
每当您更新文件时，框架将生成一个新的版本号。
我发现在资源URL中使用基于时间戳或哈希的区分器的方法存在一个问题，该方法在服务器请求时被剥离。包含样式表链接的页面也会被缓存。因此，缓存的页面可能会请求较旧版本的样式表，但它将得到最新版本，这可能与请求页面不兼容，也可能与请求页面不兼容。
To fix this, you either have to guard the requesting page with a no-cache header or meta, to make sure it gets refreshed on every load. Or you have to maintain all versions of the style file that you ever deployed on the server, each as an individual file and with their differentiator intact so that the requesting page can get at the version of the style file it was designed for. In the latter case, you basically tie the versions of the HTML page and the style sheet together, which can be done statically and doesn't require any server logic.
ASP。NET 4.5及以上版本可以使用脚本捆绑。
The request http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81 is for the bundle AllMyScripts and contains a query string pair v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81. The query string v has a value token that is a unique identifier used for caching. As long as the bundle doesn't change, the ASP.NET application will request the AllMyScripts bundle using this token. If any file in the bundle changes, the ASP.NET optimization framework will generate a new token, guaranteeing that browser requests for the bundle will get the latest bundle.
捆绑还有其他好处，包括通过缩小页面来提高首次加载时的性能。
对于我的开发，我发现Chrome有一个很好的解决方案。
https://superuser.com/a/512833
随着开发人员工具的打开，只需长按刷新按钮，让放手一旦你悬停在“空缓存和硬加载”。
这是我最好的朋友，是一种超轻量级的方式来得到你想要的!
更改文件名也可以。但这通常不是最简单的解决方案。
正如你所注意到的，HTTP缓存控制标头为“no-cache”并不总是有效。HTTP 1.1规范为用户代理提供了决定是否请求新副本的回旋余地。(如果只看指令的名称，这是不直观的。去阅读实际的HTTP 1.1缓存规范…这在上下文中更有意义。)
简而言之，如果你想要严格的缓存控制使用
Cache-Control: no-cache, no-store, must-revalidate
在响应头中。
