HTTP 标头 - 硬刷新 JavaScript/CSS答案

【问题标题】：HTTP Headers - Hard refresh JavaScript/CSSHTTP 标头 - 硬刷新 JavaScript/CSS
【发布时间】：2012-06-15 17:36:18
【问题描述】：

我最近向我的网站添加了 HTTP 标头，以通知浏览器在每次遇到给定的 JS/CSS URL 时与服务器进行检查。我已经对其进行了测试，并且效果很好；现在所有浏览器都会发出有条件的GET 请求。

但问题是——人们仍然缓存了旧的标头；标题或多或少告诉浏览器“永远缓存这个；不要费心要求更新！”。这可以通过硬刷新来解决。在我们推出代码后，我不想与每个人交流，请在任何错误页面上按 F5。

是否有任何 HTTP 标头/HTML 元标记我可以放在 HTML 文档本身上说“浏览器，忽略 JS/CSS 文件上的标头并下载所有最新版本的此页面上包含的文件”？

随着越来越多的人清除缓存或学会自行刷新，这个问题最终会自行解决。但是，我宁愿现在修复它。然后在一个月左右的时间里，我将删除 HTML 级别的标头，以便在我想要的地方缓存——基于每个资源。

编辑：我不想重命名资源或添加查询参数。这就是我们过去使用的（?v=18、?v=19 等），每次更新资源时增加这个数字是一件苦差事。即使以编程方式进行也不是理想的解决方案。特别是现在我们的服务器配置正确。在 HTTP 级别上执行此操作更有意义，因此无论您如何访问它，它都可以工作 - 包括在页面上、直接从地址栏或其他方式。

【问题讨论】：

也许更改样式表的名称，然后更改 HTML 以加载不同的表？

标签： html http caching

【解决方案1】：

在脚本源上传递一个参数，这将强制重新加载脚本......实际上你可以通过版本或类似来做到这一点

<script src="/test/script/myawesomescript.js?ver=1.0&pwn=yes" ...>

这对其他用户来说是可行的，而且看起来很简单……当你觉得它已经足够长的时间时，回到旧的方式。但如果您想强制用户刷新，这将起作用。

此方法用于防止某些框架缓存网页。让我知道你是否成功

http://css-tricks.com/can-we-prevent-css-caching/ -- 这里是 css 概念的链接（也应该在 js 中工作） -- 最大的不同是你不希望它永远缓存，所以不要使用时间戳，使用我的风格，比如 from以上 :) 享受！

【讨论】：

【解决方案2】：

基本上唯一的方法是让浏览器不使用缓存的 URL。

一种方法是在 URL 的末尾使用缓存清除虚拟参数。

some-name.css?q=1

这将强制浏览器重新加载该文件（因为该 URL 不在缓存中），并且下载的文件不会因为您的新标头而被缓存。 但是：您可能需要无限期地使用这个新名称，因为您不能保证一旦您再次离开虚拟参数，缓存的版本仍然可以使用。

另一种方法是完全重命名文件。

my-new-name.css

【讨论】：

值得一提的是，您可以保留“永久”缓存标头，并在需要更改时像这样对文件名进行版本控制。
@rambocoder：是的，应该提到这一点。这就是为什么经常以这种方式进行版本控制的原因（可以指定新版本并将加载；如果需要，仍然可以指定旧版本）。