我注意到一些浏览器(特别是Firefox和Opera)非常热衷于使用.css和.js文件的缓存副本，甚至在浏览器会话之间。当您更新其中一个文件时，这会导致一个问题，但用户的浏览器会继续使用缓存的副本。
当文件发生更改时，强迫用户浏览器重新加载文件的最优雅的方法是什么?
理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。
我发现John Millikin和da5id的建议很有用。这有一个专门的术语:自动版本控制。
我在下面发布了一个新的答案，这是我最初的解决方案和约翰的建议的结合。
SCdF建议的另一个想法是将伪查询字符串附加到文件中。(一些自动使用时间戳作为伪查询字符串的Python代码是由pi..提交的)
然而，关于浏览器是否缓存带有查询字符串的文件还存在一些讨论。(请记住，我们希望浏览器缓存该文件并在以后的访问中使用它。我们只希望它在文件更改时再次获取该文件。)
当前回答
JavaScript文件的另一种方法是使用jQuery $。与$. getScript结合使用。ajaxSetup选项缓存:false。
而不是:
<script src="scripts/app.js"></script>
你可以使用:
$.ajaxSetup({
cache: false
});
$.getScript('scripts/app.js'); // GET scripts/app.js?_1391722802668
其他回答
这里的许多答案主张向URL添加时间戳。除非直接修改生产文件，否则文件的时间戳不太可能反映文件更改的时间。在大多数情况下，这将导致URL比文件本身更频繁地更改。这就是为什么你应该使用文件内容的快速散列，如levik和其他人建议的MD5。
请记住，该值应该在构建或运行时计算一次，而不是在每次请求文件时计算一次。
例如，下面是一个简单的bash脚本，它从标准输入读取文件名列表，并将包含散列的JSON文件写入标准输出:
#!/bin/bash
# Create a JSON map from filenames to MD5 hashes
# Run as hashes.sh < inputfile.list > outputfile.json
echo "{"
delim=""
while read l; do
echo "$delim\"$l\": \"`md5 -q $l`\""
delim=","
done
echo "}"
然后，该文件可以在服务器启动时加载并引用，而不是读取文件系统。
我将文件内容的MD5哈希值放在其URL中。这样我就可以设置一个很长的过期日期，而不必担心用户使用旧的JS或CSS。
我还在运行时(或在文件系统更改时)对每个文件进行一次计算，因此在设计时或构建过程中没有什么有趣的事情要做。
如果你使用ASP。NET MVC，那么你可以在我的另一个答案中查看代码。
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.
捆绑还有其他好处，包括通过缩小页面来提高首次加载时的性能。
只需使用服务器端代码添加文件的日期…这样，它将被缓存，只有当文件更改时才会重新加载。
在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;
}
}
对于在开发和测试时遇到此问题的开发人员:
简单地删除缓存。
“保持缓存与文件一致”..太麻烦了。
一般来说，我不介意加载更多的文件——甚至在大多数项目中加载没有改变的文件——实际上是无关紧要的。在开发应用程序时，我们主要从磁盘加载，在localhost:port上加载，因此网络流量的增加不是一个棘手的问题。
大多数小项目只是玩玩而已——它们从来没有真正投入生产。所以对他们来说，你不需要更多的东西……
因此，如果你使用Chrome DevTools，你可以遵循如下图所示的禁用缓存方法:
如果你有Firefox缓存问题:
只在开发过程中这样做。你还需要一种机制来强制重新加载用于生产，因为如果你频繁地更新你的应用程序，你的用户将使用旧的缓存失效的模块，而你没有提供一个专门的缓存同步机制，就像上面的答案中描述的那样。
是的，这个信息已经在以前的答案中，但我仍然需要做谷歌搜索才能找到它。
