如何强制客户端刷新JavaScript文件？

我们目前正在进行私人测试,因此仍然在进行相当快速的更改,尽管显然随着使用量开始增加,我们将放慢这一过程.话虽这么说,我们遇到的一个问题是,在我们用新的JavaScript文件推出更新之后,客户端浏览器仍然使用文件的缓存版本,但他们看不到更新.显然,在支持调用上,我们可以简单地通知他们进行ctrlF5刷新以确保他们从服务器获取最新文件,但最好在此之前处理它.

我们当前的想法是简单地将版本号附加到JavaScript文件的名称上,然后在进行更改时,增加脚本上的版本并更新所有引用.这绝对可以完成工作,但更新每个版本的引用可能会变得很麻烦.

我确信我们不是第一个处理这个问题的人,我想我会把它扔给社区.在更新代码时,如何确保客户更新缓存？如果您使用上述方法,您是否正在使用简化更改的流程？

1> Huppie..：

---

据我所知,一个常见的解决方案是?在脚本的src链接中添加一个.

例如:

---

我假设在这一点上,没有比find-replace更好的方法来增加所有脚本标签中的这些"版本号"？

你可能有一个版本控制系统为你做这个吗？大多数版本控制系统都有办法在登记时自动注入修订号.

它看起来像这样:

---

当然,总会有像这样的更好的解决方案.

---

为了意识:这被认为是一个黑客.这种方法欺骗浏览器认为正在指定一个新文件,因为它只是查看完整的文件名而不解释它.`foo.js？1`与`foo.js？2`的名称不同,因此浏览器会认为它们是两个不同的文件.一个缺点是两个文件将同时存在于用户的缓存中,占用不必要的空间.

---

我认为这不是关于更高或更低的版本号,而是关于将附加的变量值更改为浏览器尚未缓存的内容.

---

有谁知道IE7是否忽略了这一点？当我在IE8可比性视图中进行测试时,似乎忽略了附加数据并使用了缓存文件.

---

我总是知道查询字符串是键值对,如？ver = 123.谢谢!:)

---

我们最近遇到了同样的问题,我能想到的最好的是一个附加"？mod = 123456"的简单函数,其中123456是文件上修改日期的unix时间戳.这似乎解决了问题,同时仍允许适当的缓存.但是,我仍然看到浏览器忽略了这个指令并且无论如何都使用旧的JS,但我不知道有一个优雅的"完全修复".

---

@LeeWhite无论您如何处理问题,这两个文件都将缓存在浏览器中.要么是因为他们有不同的请求参数或不同的路径.所以我认为这不是请求参数方法的缺点.

2> Chase Seiber..：

---

将当前时间附加到URL确实是一种常见的解决方案.但是,如果需要,您还可以在Web服务器级别进行管理.可以将服务器配置为为javascript文件发送不同的HTTP标头.

例如,要强制将文件缓存不超过1天,您将发送:

Cache-Control: max-age=86400, must-revalidate

对于测试版,如果您想强制用户始终获取最新信息,您可以使用:

Cache-Control: no-cache, must-revalidate

---

他正在讨论Web服务器为每个文件发送的标头.例如,应该可以在Apache中配置.我认为这将是最好的方法

---

你能更具体一点吗？

---

对于开发Web应用程序,它可能是一个很好的解决方案.对于您不希望永久使缓存无效的生产站点,除非您*知道*每个目标客户端浏览器都已访问该站点,否则它不是一个好的解决方案.它让我想到了一个潜在的Web服务器功能:根据配置的部署日期调整max-age参数.那将是真棒.

3> 小智..：

---

Google Page-Speed:不要在URL中包含静态资源的查询字符串.大多数代理,最着名的是Squid从版本3.0开始,不会使用"？"来缓存资源.即使响应中存在Cache-control:public标头,也会在其URL中显示.要为这些资源启用代理缓存,请从对静态资源的引用中删除查询字符串,而是将参数编码为文件名本身.

在这种情况下,你可以包含版本为URL例如:http://abc.com/ V1.2 /script.js和使用Apache的mod_rewrite重定向链接http://abc.com/script.js.更改版本时,客户端浏览器将更新新文件.

4> amos..：

---

此用法已被删除:https: //developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

这个答案仅晚了6年,但我在很多地方都没有看到这个答案...... HTML5引入了用于解决这个问题的Application Cache.我发现我写的新服务器代码正在崩溃存储在人们浏览器中的旧javascript,所以我想找到一种方法来使他们的javascript过期.使用如下所示的清单文件:

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

每次希望用户更新其缓存时,都会生成带有新时间戳的文件.作为旁注,如果你添加它,浏览器将不会重新加载(即使用户刷新页面),直到清单告诉它.

---

请阅读文档,因为此功能已从Web标准中删除https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

5> 小智..：

---

如何将filesize添加为加载参数？

因此,每次更新文件时,"filever"参数都会更改.

更新文件和更新结果的文件大小相同时怎么样？有什么可能性？

---

这使用PHP标签,如果使用PHP,它确实是一个好主意.

---

使用filemtime（$ file）输出文件的时间戳，使用time（）您不能使用缓存，因为它每秒钟更改一次。

6> Echo says Re..：

---

并非所有浏览器都使用"？"缓存文件 在里面.我做了什么来确保它尽可能地被缓存,我在文件名中包含了该版本.

所以不是stuff.js?123,我做了stuff_123.js

我用mod_redirect(我认为)在apache have stuff_*.js中去stuff.js

---

有关此方法的详细说明,请访问http://particletree.com/notebook/automatically-version-your-css-and-javascript-files/

---

如果您可以在答案中包含`.htaccess`代码以供将来参考,那就太棒了.

7> Ravi Ram..：

---

对于ASP.NET页面,我使用以下内容

之前

之后(强制重装)

添加DateTime.Now.Ticks非常有效.

---

这个与客户端的所有缓存机制相悖.虚拟参数应替换为"{major version} _ {minor_version} _ {build_number} _ {Revision},这对于每个版本都是唯一的.

---

虽然这可能是开发环境中的上帝解决方案,但它不适合生产.这将在每次为文件加载页面时完全禁用缓存**.想象一下每天10k页面加载一个50Kb文件,它每天代表500Mb的Javascript文件.

---

@alex确实.我只是想提醒的是,如果答案证明的使用使得其生产方式,它可以影响不发展显示.

---

确保每天加载一次新副本的一种可能方法是使用'