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

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

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


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

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

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

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


当前回答

这里的许多答案主张向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 "}"

然后,该文件可以在服务器启动时加载并引用,而不是读取文件系统。

其他回答

我们有一个解决方案,有一些不同的实现方式。我们使用上面的解决方案。

datatables?v=1

我们可以处理文件的版本。这意味着每次我们改变文件时,它的版本也会改变。但这不是一个合适的方式。

另一种方法使用GUID。它也不合适,因为每次它都从浏览器缓存中获取文件而不使用。

datatables?v=Guid.NewGuid()

最后一种最好的方法是:

当文件发生更改时,也要更改版本。检查以下代码:

<script src="~/scripts/main.js?v=@File.GetLastWriteTime(Server.MapPath("/scripts/main.js")).ToString("yyyyMMddHHmmss")"></script>

通过这种方式,当您更改文件时,LastWriteTime也会更改,因此文件的版本将会更改,并且在下次打开浏览器时,它会检测到一个新文件并获取它。

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

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

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

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

在响应头中。

如果您使用的是现代浏览器,可以使用清单文件通知浏览器哪些文件需要更新。它不需要标头,也不需要url中的版本等等。

详情请参见: 使用应用程序缓存

您可以使用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>

对于我的开发,我发现Chrome有一个很好的解决方案。

https://superuser.com/a/512833

随着开发人员工具的打开,只需长按刷新按钮,让放手一旦你悬停在“空缓存和硬加载”。

这是我最好的朋友,是一种超轻量级的方式来得到你想要的!