我正在通过 XAMPP 开发基于 WordPress 源代码的网站。有时我更改 CSS 代码、脚本或其他东西,我注意到我的浏览器需要时间来应用修改。这导致我使用多个浏览器来刷新一个,如果它不应用新样式,我会尝试第二个,并且总是这样。
有什么办法可以避免这个问题吗?
有时我在更改代码时没有注意到之前的修改。
我正在通过 XAMPP 开发基于 WordPress 源代码的网站。有时我更改 CSS 代码、脚本或其他东西,我注意到我的浏览器需要时间来应用修改。这导致我使用多个浏览器来刷新一个,如果它不应用新样式,我会尝试第二个,并且总是这样。
有什么办法可以避免这个问题吗?
有时我在更改代码时没有注意到之前的修改。
按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");
Chrome 的缓存可以通过打开开发者工具来禁用F12,点击右下角的齿轮图标并在设置对话框中选择禁用缓存,如下所示:
取自这个答案的图片。
about:config
在 URL 栏中键入,然后找到标题为 的条目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(); ?>" />
它会一直刷新!
编辑:当然,这对于整个网站来说并不实用,因为您不会为所有内容手动添加它。
检查这个:如何强制浏览器使用我的样式表的最新版本?
假设您的 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" />
这样,您作为开发人员,只需刷新页面即可查看更改。但是不要忘记在生产中注释该代码,毕竟缓存对您的客户来说是一件好事。
生产模式
因为在生产中您将允许缓存并且您的客户不需要知道如何强制完全重新加载或任何其他技巧,所以您必须保证浏览器将加载新文件。是的,在这种情况下,我知道的最佳方法是更改文件名。