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

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

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


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

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

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

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


当前回答

我建议您使用实际CSS文件的MD5散列,而不是手动更改版本。

URL应该是这样的

http://mysite.com/css/[md5_hash_here]/style.css

您仍然可以使用重写规则来去除散列,但优点是现在您可以将缓存策略设置为“永远缓存”,因为如果URL相同,这意味着文件没有改变。

然后,您可以编写一个简单的shell脚本来计算文件的散列并更新标记(您可能希望将其移动到一个单独的文件中进行包含)。

只要在CSS每次更改时运行该脚本就可以了。浏览器只会在文件被修改时重新加载。如果你做了一个编辑,然后撤销它,为了让你的访问者不重新下载,你不需要确定需要返回到哪个版本。

其他回答

对于在开发和测试时遇到此问题的开发人员:

简单地删除缓存。

“保持缓存与文件一致”..太麻烦了。

一般来说,我不介意加载更多的文件——甚至在大多数项目中加载没有改变的文件——实际上是无关紧要的。在开发应用程序时,我们主要从磁盘加载,在localhost:port上加载,因此网络流量的增加不是一个棘手的问题。

大多数小项目只是玩玩而已——它们从来没有真正投入生产。所以对他们来说,你不需要更多的东西……

因此,如果你使用Chrome DevTools,你可以遵循如下图所示的禁用缓存方法:

如果你有Firefox缓存问题:

只在开发过程中这样做。你还需要一种机制来强制重新加载用于生产,因为如果你频繁地更新你的应用程序,你的用户将使用旧的缓存失效的模块,而你没有提供一个专门的缓存同步机制,就像上面的答案中描述的那样。

是的,这个信息已经在以前的答案中,但我仍然需要做谷歌搜索才能找到它。

简单的客户端技术

一般来说,缓存是好的…所以有一些技术,取决于你是在开发网站时为自己解决问题,还是在生产环境中控制缓存。

一般访问者不会有相同的体验,当你在开发网站时。由于一般访问者访问站点的频率较低(可能每个月只有几次,除非您是谷歌或hi5 Networks),那么他们不太可能将您的文件保存在缓存中,这可能就足够了。

如果你想强制一个新版本进入浏览器,你可以在请求中添加一个查询字符串,并在你进行重大更改时增加版本号:

<script src="/myJavascript.js?version=4"></script>

这将确保每个人都获得新文件。它可以工作,因为浏览器会查看文件的URL,以确定缓存中是否有副本。如果您的服务器没有设置为对查询字符串执行任何操作,那么它将被忽略,但是对于浏览器来说,该名称将看起来像一个新文件。

另一方面,如果您正在开发一个网站,您不希望每次保存对开发版本的更改时都更改版本号。那太乏味了。

所以当你在开发你的网站时,一个很好的技巧是自动生成一个查询字符串参数:

<!-- Development version: -->
<script>document.write('<script src="/myJavascript.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>

在请求中添加一个查询字符串是一个资源版本化的好方法,但对于一个简单的网站来说,这可能是不必要的。记住,缓存是一件好事。

It's also worth noting that the browser isn't necessarily stingy about keeping files in cache. Browsers have policies for this sort of thing, and they are usually playing by the rules laid down in the HTTP specification. When a browser makes a request to a server, part of the response is an Expires header... a date which tells the browser how long it should be kept in cache. The next time the browser comes across a request for the same file, it sees that it has a copy in cache and looks to the Expires date to decide whether it should be used.

信不信由你,实际上是你的服务器使浏览器缓存如此持久。您可以调整服务器设置并更改Expires报头,但我上面写的小技巧可能是一种更简单的方法。由于缓存很好,所以您通常希望将日期设置为遥远的将来(“far -future Expires Header”),并使用上面描述的技术强制更改。

如果你想了解更多关于HTTP的信息或者这些请求是如何发出的,一本很好的书是Steve Souders的《高性能网站》。这是对这门学科很好的介绍。

谷歌的mod_pagespeed插件将为你自动版本控制。它真的很光滑。

它解析HTML在它的方式从web服务器(与PHP, Ruby on Rails, Python,静态HTML -任何)和重写链接到CSS, JavaScript,图像文件,使他们包括一个id代码。它在修改后的url上提供文件,并对它们进行非常长的缓存控制。当文件更改时,它会自动更改url,因此浏览器必须重新获取它们。它基本上可以正常工作,无需对代码进行任何更改。它甚至还会缩小你的代码。

如果您不想让客户端缓存文件,这个解决方案似乎是最快实现的。如果你在footer.php中加载文件,用time()调整部分:

<script src="<?php echo get_template_directory_uri(); ?>/js/main.js?v=<?= time() ?>"></script>

我建议您使用实际CSS文件的MD5散列,而不是手动更改版本。

URL应该是这样的

http://mysite.com/css/[md5_hash_here]/style.css

您仍然可以使用重写规则来去除散列,但优点是现在您可以将缓存策略设置为“永远缓存”,因为如果URL相同,这意味着文件没有改变。

然后,您可以编写一个简单的shell脚本来计算文件的散列并更新标记(您可能希望将其移动到一个单独的文件中进行包含)。

只要在CSS每次更改时运行该脚本就可以了。浏览器只会在文件被修改时重新加载。如果你做了一个编辑,然后撤销它,为了让你的访问者不重新下载,你不需要确定需要返回到哪个版本。