如何强制浏览器重新加载缓存的CSS和JS文件?

我注意到一些浏览器(特别是Firefox和Opera)非常热衷于使用.css和.js文件的缓存副本，甚至在浏览器会话之间。当您更新其中一个文件时，这会导致一个问题，但用户的浏览器会继续使用缓存的副本。

当文件发生更改时，强迫用户浏览器重新加载文件的最优雅的方法是什么?

理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。

我发现John Millikin和da5id的建议很有用。这有一个专门的术语:自动版本控制。

我在下面发布了一个新的答案，这是我最初的解决方案和约翰的建议的结合。

SCdF建议的另一个想法是将伪查询字符串附加到文件中。(一些自动使用时间戳作为伪查询字符串的Python代码是由pi..提交的)

然而，关于浏览器是否缓存带有查询字符串的文件还存在一些讨论。(请记住，我们希望浏览器缓存该文件并在以后的访问中使用它。我们只希望它在文件更改时再次获取该文件。)

当前回答

更改文件名也可以。但这通常不是最简单的解决方案。

正如你所注意到的，HTTP缓存控制标头为“no-cache”并不总是有效。HTTP 1.1规范为用户代理提供了决定是否请求新副本的回旋余地。(如果只看指令的名称，这是不直观的。去阅读实际的HTTP 1.1缓存规范…这在上下文中更有意义。)

简而言之，如果你想要严格的缓存控制使用

Cache-Control: no-cache, no-store, must-revalidate

在响应头中。

其他回答

在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" />

每当您更新文件时，框架将生成一个新的版本号。

只需在你想要硬重载(强制浏览器重载缓存的CSS和JavaScript文件)的地方添加以下代码:

$(window).load(function() {
    location.reload(true);
});

在.load中执行此操作，这样它就不会像循环一样刷新。

我这样做的方法是简单地有链接元素到服务器端包含:

<!--#include virtual="/includes/css-element.txt"-->

css-element.txt的内容在哪里

<link rel="stylesheet" href="mycss.css"/>

如果你想链接到my-new-css。css，你只需要改变include。

我听说这叫做“自动版本控制”。最常见的方法是在URL中包含静态文件的修改时间，并使用重写处理程序或URL配置将其剥离:

参见:

Django中的自动资产版本控制自动版本你的CSS和JavaScript文件

你可以把?foo=1234放在CSS / JavaScript导入的末尾，把1234改成你喜欢的任何值。看一下Stack Overflow HTML源代码的例子。

这里的意思是?无论如何，参数都会在请求中被丢弃/忽略，您可以在推出新版本时更改这个数字。

注意:关于这究竟如何影响缓存存在一些争论。我认为它的一般要点是GET请求，无论是否带参数都应该是可缓存的，因此上面的解决方案应该是有效的。

然而，这取决于web服务器和用户使用的浏览器，因为它可以直接要求一个新的版本。

推荐文章