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

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

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


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

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

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

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


当前回答

如果使用jQuery,有一个叫做缓存的选项,它会附加一个随机数。

我知道这不是一个完整的答案,但它可能会节省你一些时间。

其他回答

这是一个纯JavaScript解决方案

(function(){

    // Match this timestamp with the release of your code
    var lastVersioning = Date.UTC(2014, 11, 20, 2, 15, 10);
 
    var lastCacheDateTime = localStorage.getItem('lastCacheDatetime');

    if(lastCacheDateTime){
        if(lastVersioning > lastCacheDateTime){
            var reload = true;
        }
    }

    localStorage.setItem('lastCacheDatetime', Date.now());

    if(reload){
        location.reload(true);
    }

})();

上面将查找用户最后一次访问您的站点的时间。如果最后一次访问是在发布新代码之前,它使用location.reload(true)强制从服务器刷新页面。

我通常把这作为<head>中的第一个脚本,因此它在任何其他内容加载之前进行评估。如果需要重新加载,用户很难注意到。

我使用本地存储来存储浏览器上最后一次访问的时间戳,但是如果您希望支持旧版本的IE,您可以添加cookie。

不要使用foo.css?version=1!

浏览器不应该缓存带有GET变量的url。据http://www.thinkvitamin.com/features/webapps/serving-javascript-fast网站报道,尽管ie和Firefox会忽略这一点,但Opera和Safari不会!相反,使用foo.v1234.css,并使用重写规则去除版本号。

我建议执行以下流程:

无论何时部署你的CSS和JavaScript文件。类似于:screen.1233.css(如果您使用版本控制系统,该数字可以是您的SVN版本) 缩小它们以优化加载时间

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

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


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

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

对于一个2008年左右的网站来说,这30个左右的答案是很好的建议。然而,当涉及到现代的单页应用程序(SPA)时,可能是时候重新考虑一些基本假设了……特别是web服务器只提供文件的单个最新版本是理想的想法。

假设您是一个用户,浏览器中加载了SPA的M版本:

CD管道将应用程序的新版本N部署到服务器上 您在SPA中导航,它向服务器发送一个XMLHttpRequest (XHR)以获取/some.template

(您的浏览器没有刷新页面,所以您仍然在运行版本M)

服务器返回/some的内容。template -你想让它返回模板的版本M还是N ?

如果格式为/some。模板在版本M和N之间发生了变化(或者文件被重命名了等等),你可能不希望将版本N的模板发送到运行旧版本M解析器的浏览器。†

Web应用程序在满足两个条件时遇到这个问题:

在初始页面加载后的一段时间内异步请求资源 应用程序逻辑假设有关资源内容的事情(在将来的版本中可能会改变)

一旦你的应用程序需要并行提供多个版本,解决缓存和“重新加载”变得微不足道:

将所有site文件安装到versioned目录:/v<release_tag_1>/…files…,/v<release_tag_2>/…files… 设置HTTP头,让浏览器永远缓存文件

(或者更好的是,把所有东西都放在CDN中)

更新所有<script>和<link>标签等,以指向某个版本目录中的该文件

最后一步听起来很棘手,因为它可能需要为服务器端或客户端代码中的每个URL调用URL构建器。或者您可以聪明地使用<base>标记并在一个地方更改当前版本。

†解决这个问题的一种方法是在新版本发布时强制浏览器重新加载所有内容。但是为了让任何正在进行的操作完成,至少并行支持两个版本:v-current和v-previous可能仍然是最简单的。