Firefox 不会立即反映网站的新变化，但 Chrome 会吗？答案

【问题标题】：Firefox does not reflect new changes in website immediately, but Chrome does?Firefox 不会立即反映网站的新变化，但 Chrome 会吗？
【发布时间】：2013-12-16 16:43:48
【问题描述】：

我注意到 Firefox 不会立即将任何设计更改（HTML/CSS/图像）反映到网站上。必须至少刷新一次才能看到更改。所以基本上，当用户来到网站时，他/她会看到一个乱七八糟的页面，必须刷新一次才能看到新的设计。 Chrome 没有这个问题。如何使用 HTML/JavaScript 或 JavaScript 库解决此问题？

我当前的 HTML 元代码

<HEAD>
<META http-equiv="Cache-Control" content="no-cache">
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Expires" content="0">
.....

【问题讨论】：

你用的是什么版本的firefox和什么平台？
简单的方法是更改您的 html 并将随机参数添加到 css 和图像 URL，以欺骗 firefox 认为它们是必须再次下载的不同资源。有许多缓存破坏技术，但请记住，您不能命令浏览器删除它的缓存。
@drew_w 是 Firefox 26.0
@jammypeach 大多数主要网站都有这个问题。必须有办法解决这个问题。我不确定如何。
@Gandalf 我概述的技术将起作用。实现起来相当简单——如果您更改资源的名称，那么 Firefox 或任何其他浏览器都会认为它们是“新的”并正确下载它们。因此 src 属性为“mygif.gif”的 img 标签将变为“mygif.gif?version=1”。对于浏览器来说，这看起来像是一个不同的资源，但对于您的服务器来说，它是同一个文件。见：stackoverflow.com/questions/728616/…

标签： html firefox cross-browser browser-cache

【解决方案1】：

解决缓存资源的一种简单技术是在 HTML 中该资源的 URL 末尾添加一个随机参数。

一个例子可能是：

<img src='mygif.gif'/> <!-- this is cached -->

如果 mygif.gif 已经被缓存，浏览器不会费心再次下载它 - 所以要在 mygif.gif 更改后强制它这样做，修改 URL 如下：

<img src='mygif.gif?version=1.1'/> 
<!-- this is not cached as it appears to be a different file -->

对于浏览器，此文件是不同的文件，必须下载，但对于您的服务器，它是同一个文件。

为了便于维护，最好符合您的随机参数，所以我通常使用?version=1 之类的东西，所以如果您需要再次这样做，您可以在您的项目上进行字符串替换并增加版本号。

此技术的另一个很好的解释可以在这里找到：Disable cache for some images

但重要的是要记住，您不能强制浏览器清除其缓存，您只能使用类似这样的技术，浏览器将始终决定缓存什么和下载什么，甚至缓存和过期标头只是一个“提示”。

【讨论】：

【解决方案2】：

我发现以下帖子对于防止页面被所有类型的浏览器缓存非常有帮助：

Making sure a web page is not cached, across all browsers

除了元标记之外，我还使用日期戳或唯一代码，如下所示：

<link rel="stylesheet" href="css/styles.css?version=140830" media="screen" />

（顺便说一句，我遇到了相反的问题 - 在 Firefox 中工作，但不是 Chrome。）

【讨论】：