Question

我注意到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">
.....

Answer 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

重要的是要记住，你不能强制浏览器清除它的缓存，你只能使用这样的技术，浏览器将始终决定缓存什么和下载什么，甚至缓存和过期标题只是一个'提示'。

Answer 2

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

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

除了meta标签，我使用日期戳或这样的唯一代码：

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

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

Firefox没有立即反映网站的新变化，但Chrome确实如此？

2 个答案: