我正在通过 XAMPP 开发一个基于 WordPress 源代码的网站。有时我更改 CSS 代码、脚本或其他东西，我注意到我的浏览器需要时间来应用修改。这导致我使用多个浏览器来刷新一个，如果它不应用新样式，我尝试第二个，它总是这样。
有什么办法可以避免这个问题？
有时我在更改代码时没有注意到之前的修改。
【问题讨论】：
标签： javascript css browser xampp
按 Ctrl + F5（或 Ctrl + Shift + R）强制缓存重新加载。我相信 Mac 使用 Cmd + Shift + R。
在 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打开开发者工具，点击右下角的齿轮图标并在设置对话框中选择禁用缓存来禁用Chrome的缓存，如下所示：
图片取自this answer。
在 URL 栏中键入 about:config，然后找到标题为 network.http.use-cache 的条目。将此设置为false。
【讨论】：
如果您想在客户端避免这种情况，您可以在文件内容更改时将 ?v=1.x 添加到 css 文件链接。例如，如果有 <link rel="stylesheet" type="text/css" href="css-file-name.css">，您可以将其更改为 <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">，这将绕过缓存。
【讨论】：
如果你会写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(); ?>" />
它会一直刷新！
编辑：当然，这对于整个网站来说并不实用，因为您不会为所有内容手动添加它。
【讨论】：
检查这个：How Do I Force the Browser to Use the Newest Version of my Stylesheet?
假设您的 css 文件是 foo.css，您可以通过附加查询字符串来强制客户端使用最新版本，如下所示。
<link rel="stylesheet" href="foo.css?v=1.1">
【讨论】：
开发者观点
如果您处于开发模式（如在原始问题中），最好的方法是通过 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" />
这样，作为开发者的你，只需要刷新页面就可以看到变化了。 但是不要忘记在生产时注释该代码，毕竟缓存对您的客户来说是一件好事。
生产模式
因为在生产中您将允许缓存并且您的客户端不需要知道如何强制完全重新加载或任何其他技巧，您必须保证浏览器将加载新文件。
是的，在这种情况下，我知道的最佳方法是更改文件名。
【讨论】：
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>
修改会刷新。
【讨论】：
而且我没有看到有人回答。 这是每次加载外部css的简单技巧
<link rel="stylesheet" href="/myExternalCss.css?<?=time()?>">
【讨论】：
确保这不是从您的 DNS 发生的。例如 Cloudflare 有它，您可以在其中打开开发模式，在其中强制清除样式表和图像，因为 Cloudflare 提供加速缓存。这将禁用它并强制它在每次有人访问您的网站时进行更新。
【讨论】：
使用 php-include 代替 html-head 中的链接标签到外部 css 文件：
<style>
<?php
include("style.css");
?>
</style>
有点骇人听闻，但对我有用:)
【讨论】：
尝试清除浏览器缓存。
【讨论】：
您可以使用 Firefox 的 Web 开发人员工具栏关闭缓存。
【讨论】：
这个 Firefox 扩展是我可以开始工作的唯一解决方案： https://addons.mozilla.org/en-us/firefox/addon/css-reloader/
【讨论】：
上面接受的答案是正确的。但是，如果您只想定期重新加载缓存，并且您使用的是 Firefox，则 Web 开发人员工具（截至 2015 年 11 月在工具菜单项下）提供了一个网络选项。这包括一个重新加载按钮。选择重新加载一次缓存重置。
【讨论】：
如果您想确保 Chrome 为所有用户正确刷新这些文件，那么您需要在 Cache-Control 标头中包含 must-revalidate。这将使 Chrome 重新检查文件以查看它们是否需要重新获取。
推荐以下响应头：
Cache-Control: must-validate
这告诉 Chrome 与服务器检查，看看是否有更新的文件。如果有更新的文件，它将在响应中接收它。如果不是，它将收到 304 响应，并保证缓存中的响应是最新的。
如果您不设置此标头，则在没有任何其他设置使文件无效的情况下，Chrome 将从与服务器检查是否有更新的版本。
这是一个blog post，进一步讨论了这个问题。
【讨论】：
我已经决定，由于浏览器不检查新版本的 css 和 js 文件，所以每当我进行更改时，我都会重命名我的 css 和 js 目录。我使用 css1 到 css9 和 js1 到 js9 作为目录名称。当我到 9 点时，我下一次从 1 点开始。这很痛苦，但每次都能完美运行。不得不告诉用户键入是荒谬的。
【讨论】：
我有一个案例，我需要能够远程创建和更改影响数千个客户端的样式表，但由于网络负载过重的风险，我没有关闭缓存。
由于我可以远程更改 HTML 内容，因此我将样式表与与样式表内容匹配的哈希码链接起来。
https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808
也就是说，当 HTML 内容发生变化时，我还使用客户端 javascript 函数小心地替换节点和属性，这意味着样式表链接标记不会被替换，只会更改 href 属性。
此方案在 Windows 上的 Chrome、Firefox 和 Edge 以及 Android 上的 Chrome 中运行良好，但令我惊讶的是，它并不总是适用于 Android 上的网络客户端。所以我或多或少在寻找使用javascript强制/触发更新的东西——最好是不需要重新加载页面。
【讨论】：
您可以使用 Firefox/Chrome 开发者工具栏：
【讨论】：
试试这个：
link href="styles/style.css?=time()" rel="stylesheet" type="text/css"
如果您在“？”之后需要一些东西每次访问页面时都会有所不同，然后time() 将执行此操作。将其永久保留在您的代码中并不是一个好主意，因为它只会减慢页面加载速度并且可能没有必要。
我发现，如果您对页面布局进行了大量更改，并且访问新样式表对于在屏幕上显示合理的内容至关重要，那么强制刷新样式表会很有帮助。
【讨论】：