防止CSS文件缓存

Question

我正在使用PHP开发一个简单的网站。

开发配置：WAMP

生产配置：LAMP

在测试过程中，我更改了我的CSS文件，但是当我重新加载页面时，我的浏览器（不确定是哪个）仍然使用旧的缓存CSS。

我做了一些谷歌搜索，并找到了不同的解决方案，我已经尝试过了：

• 在CSS末尾添加查询 css/main.css?78923
• 使用Ctrl + R （在Firefox中）强制获取资源
• 禁用Firefox缓存以及使用Clear Cache Firefox插件。

当这些都不起作用时，我又做了一些谷歌搜索，那里我看到了一个堆栈页面 (here)，其中有人建议Apache缓存资源。因此，问题不在Firefox上，而在服务器上。该人还提出了一种解决方案，我没有理解（我是新手）

我的问题分为两部分：

1. Apache是否会缓存资源？（如何检查我是不是这样做了？）
2. 如何防止Apache缓存资源？

PS：复制并粘贴堆栈问题中的解决方案（上面作为链接）没有起作用:(

- Ankit

---

你使用的是PHP框架还是一些预先构建的CMS或购物车？ - David Gallagher

看看这个书签工具：http://david.dojotoolkit.org/recss.html。虽然不是你要找的，但它可能会对你有所帮助。它可以重新加载CSS而无需刷新页面。 - Joseph Silber

@DavidGallagher 我没有使用任何PHP框架，只是纯PHP。 - Ankit

@JosephSilber 重新加载CSS不起作用。那么，我猜测这是APACHE缓存的某种问题？ - Ankit

这似乎有点奇怪。我会首先在另一个浏览器或另一台电脑上检查，以确保缓存发生在服务器端。我认为除非对CSS文件进行了某些处理（例如压缩），否则Apache不会缓存CSS文件，或者如果文件被加载到内存中（在开发机器上似乎是不必要的）。 - David Gallagher

Answer 1

我遇到过这个问题几次，通常通过以下方式在生产网站上调用我的CSS来解决问题。

<link rel="stylesheet" type="text/css" href="style.css?v=1" />

当你推出更新时，只需将v=1更改为v=2，它将强制所有用户的浏览器获取新的样式表。这对脚本文件也适用。如果您在Google上查看源代码，您会注意到他们也使用了这种方法。

- Mike L.

---

谢谢！这个问题让我的项目停滞了几个月，非常感谢。 - Timmah

Answer 2

我之前在我的LAMP开发系统中也遇到了同样的问题，这是由于网络挂载引起的。通过在我的Apache配置文件中添加以下两行内容，我成功地解决了这个问题。

EnableMMAP off
EnableSendfile off

- Corubba

---

我可以在我的开发环境中设置这些。但是，我的网站主机不会提供我访问 apache.conf 的权限。是否有一种本地设置这些参数的方法（可能是在 .htaccess 或类似文件中）？ - Ankit

更新：在我的开发机上，WAMP（至少）无法正常工作。PS：在WAMP上，我只看到httpd.conf。这与apache.conf有什么不同吗？ - Ankit

它们可以在 .htaccess 中设置。由于 Apache 是一个公司，httpd 是 Web 服务器的正确名称。apache.conf 和 httpd.conf 应该在语义上相等。 - Corubba

我曾经遇到过这个问题，这是对我有效的解决方案。 - BlairHippo

Answer 3

在我的php页面中，我通常会将当前日期时间添加到您的css href末尾:

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />

Ref : Here

- Delavega

Answer 4

我知道这是一个老问题，但我刚刚发现这个问题并且遇到了一些相同的问题。以下是一种快速的方法，可以不保留任何文件的缓存：

<link rel="stylesheet" href="css/style.css?<?=time()?>">

使用该方法可以在每次页面加载时获取最新版本。

- lostInTheTetons

Answer 5

每次更改资源文件（js、css等）时，我总是使用httcacheclean

- smftr

Answer 6

1. Apache（-模块）可以缓存资源，但这不是您当前的问题。
2. 要么禁用浏览器缓存，在重新加载时清除缓存，或使用修改后的标头提供CSS。您可以编写一个脚本来设置到期标头，以便您的浏览器必须获取您的CSS的新版本。

无论如何，我没有理解其中的重点。对于开发而言，最简单的方法就是禁用浏览器缓存或按Ctrl + r。

- m02ph3u5

Answer 7

我想建议类似这样的东西：

<link rel="stylesheet" href="css/style.css?v=<?=filemtime('css/style.css')?>">

实际上，filemtime() 函数返回文件修改时间。所以，只有当文件被改变时，该值才会不同。否则，该值将保持不变。

因此，这个函数帮助我们防止缓存被改变的文件，并鼓励缓存如果文件没有被更改，因为它将返回相同的值。

如果 filemtime() 的值没有改变，浏览器将使用缓存的 CSS。

- Sajid Javed