强制浏览器刷新css、javascript等

我正在通过XAMPP开发一个基于Wordpress源代码的网站。有时我会更改CSS代码、脚本或其他东西，我注意到我的浏览器需要时间来应用修改。这导致我使用多个浏览器来刷新一个浏览器，如果不应用新的样式，我会尝试第二个，而且总是这样

有没有办法避免这个问题？ 有时我在更改代码时没有注意到以前的修改。

通用解决方案 按Ctrl+F5（或Ctrl+Shift+R）强制重新加载缓存。我相信Mac使用Cmd+Shift+R

PHP 在PHP中，可以通过使用标题将过期日期设置为过去的时间来禁用缓存：

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

铬 通过使用F12打开开发者工具，点击右下角的gear图标并在设置对话框中选择Disable cache（禁用缓存），可以禁用Chrome的缓存，如下所示：

这张照片是从中国拍摄的

火狐

---

在URL栏中键入

about:config

，然后找到标题为

network.http的条目。使用缓存
。将此设置为
false
尝试清除浏览器缓存。
您可以使用Firefox的web developer工具栏关闭缓存。
如果您想避免在客户端，当文件内容更改时，您可以向css文件链接添加类似
？v=1.x
的内容。例如，如果存在
，则可以将其更改为
，这将绕过缓存。
如果可以编写php，则可以编写：

<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />

确保这不会从您的DNS发生。例如，Cloudflare提供了它，您可以打开开发模式，在该模式下，当Cloudflare提供加速缓存时，它会强制清除样式表和图像。这将禁用它，并强制它在每次有人访问您的站点时更新。
此Firefox扩展是我唯一可以使用的解决方案：
以上公认的答案是正确的。但是，如果您只想定期重新加载缓存，并且正在使用Firefox，那么Web Developer tools（自2015年11月起，位于tools菜单项下）提供了一个网络选项。这包括一个重新加载按钮。选择重新加载以进行一次性缓存重置。
尝试以下操作：

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

如果每次访问页面时，在“？”之后需要不同的内容，则
time（）
将完成此操作。将其永久保留在代码中并不是一个好主意，因为这只会降低页面加载速度，而且可能没有必要

我发现，如果您对页面布局进行了大量更改，强制刷新样式表会很有帮助，访问新的样式表对于在屏幕上显示合理的内容至关重要。
如果您想确保所有用户都能通过Chrome正确刷新这些文件，然后您需要在
缓存控制
标题中设置
必须重新验证
。这将使Chrome重新检查文件，看看是否需要重新获取它们

<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

建议使用以下响应标题：

Cache-Control: must-validate

这会告诉Chrome检查服务器，看看是否有更新的文件。如果有更新的文件，它将在响应中接收它。如果没有，它将收到304响应，并保证缓存中的响应是最新的

如果您没有设置此标题，那么在没有任何其他设置使文件无效的情况下，Chrome将永远不会与服务器检查是否有更新的版本

以下是进一步讨论该问题的示例。
开发者的观点

如果您处于开发模式（如原始问题中），最好的方法是通过HTML元标记禁用浏览器中的缓存。要使此方法通用，必须插入至少三个元标记，如下所示

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<link rel="stylesheet" href="foo.css?v=1.1">



这样，作为开发人员，您只需刷新页面即可看到更改。
但不要忘记在生产环境中对代码进行注释，毕竟缓存对客户机是一件好事

生产模式

因为在生产环境中，您将允许缓存，并且您的客户端不需要知道如何强制完全重新加载或任何其他技巧，所以您必须保证浏览器将加载新文件。
是的，在这种情况下，我知道的最好的方法是更改文件名。
检查以下内容：

假设您的css文件是
foo.css
，您可以通过添加查询字符串强制客户端使用最新版本，如下所示

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<link rel="stylesheet" href="foo.css?v=1.1">

使用php include代替html头部中指向外部css文件的链接标记：

<style>
<?php
include("style.css");
?>      
</style>



有点像黑客，但对我有效：）
我决定，因为浏览器不检查css和js文件的新版本，所以每当我进行更改时，我都会重命名我的css和js目录。我使用css1到css9和js1到js9作为目录名。当我到9点时，我下一次在1点重新开始。这是一种痛苦，但每次都能完美地工作。让用户打字是很可笑的
 我有一个案例，我需要能够远程创建和更改影响数千个客户端的样式表，但由于网络负载过大的风险，我不会关闭缓存

因为我可以远程更改HTML内容，所以我用与样式表内容匹配的哈希代码链接样式表


也就是说，我还使用客户端javascript函数在HTML内容更改时小心地替换节点和属性，这意味着样式表链接标记不会被替换，只有href属性会更改

这个场景在Windows上的Chrome、Firefox和Edge以及Android上的Chrome上都能正常工作，但令我惊讶的是，它并不总是在Android上的WebClient上工作。因此，我或多或少地在寻找一些东西来强制/触发使用javascript的更新-最好不需要重新加载页面。
您可以使用Firefox/Chrome开发者工具栏：

打开开发工具工具栏Ctrl+Shift+I
转到“网络”选项卡
按下“禁用cach”