如何防止浏览器缓存CSS文件？

Question

当我制作一个网页，将其链接到CSS文件并在浏览器中打开时，它可以正常工作。 但是如果我进行更改并在非常短的时间内刷新页面，则更改不会被反映出来。但是过了一段时间后，当我再次刷新页面时，更改就会显示出来。

因此，浏览器以某种方式保留了CSS文件的缓存，并在一段时间后使其过期。如何使浏览器不缓存CSS或HTML文件。 如果我可以在特定域上阻止它，那就更好了。

我正在使用Chrome和Firefox的Ubuntu系统，试图防止浏览器在'localhost'上缓存CSS文件...如何做到这一点...

谢谢...

- Arjun Bajaj

Answer 1

这么简单的东西应该可以工作：

<link rel="stylesheet" src="/css/screen.css?v={CURRENT_TIMESTAMP}">

只需在服务器端代码中用实际时间戳替换{CURRENT_TIMESTAMP}即可。这会让浏览器认为这是一个新文件，因为有查询字符串，并且会重新下载。如果您正在使用PHP，还可以使用文件的实际修改时间(filemtime('/path/to/css/screen.css'))，这应该可以防止不必要的下载。

- Wesley Murch

---

由于pagespeed模块的原因，它无法正常工作。在“？”之后被省略了...所以让我卸载pagespeed并再次尝试...虽然感谢您提供的想法...它非常简单而优雅... - Arjun Bajaj

Answer 2

您可以按 Ctrl+Shift+J 组合键打开开发者工具，然后在右下角找到一个齿轮图标。当您单击它时，您应该会看到一个禁用缓存的选项。

- user196106

---

这好像无法工作。我刚刚检查了一下，我启用了谷歌的 mod_pagespeed 模块。它是造成问题的原因吗？谢谢... - Arjun Bajaj

好的，我已经移除了PageSpeed并且它可以在不禁用缓存的情况下正常工作，但似乎这仍然是正确的方法。因此，我将接受这个答案...谢谢... - Arjun Bajaj

现在似乎是开发工具右上角的“三个点”图标。 点击它并选择设置。 - Steve Smith

Answer 3

了解网站是如何托管的会有所帮助，因为您可以在大多数Web服务器中进行配置。

此外，引入缓存破坏机制是一个好主意，当您更改CSS文件内容时，它会修改相关CSS文件的链接。浏览器将重新加载CSS文件，因为HTML引用了不同的URL。

一个很好的缓存破坏机制示例是Ruby on Rails 3.1资产管道，它还可以最小化文件并对其进行gzip压缩（如果浏览器支持）：

Rails 3 - Asset Pipeline -- What does it mean to me?

http://2beards.net/2011/11/the-rails-3-asset-pipeline-in-about-5-minutes/

- hendrikswan

Answer 4

看似不太优雅但非常可靠的方法是在内容更改时给资产一个新名称。这样可以解决所有用户的问题，而不仅仅是你自己：

<link rel="stylesheet" src="/css/screen_034.css">
<link rel="stylesheet" src="/css/screen_035.css">
<link rel="stylesheet" src="/css/screen_036.css">

或者（但在IDE中更改会更麻烦，并且有时会导致与缓存无关的问题）：

<link rel="stylesheet" src="/css/screen.css?pretend_version_number=034">

在大规模生产环境中，没有什么比旧的CSS文件的数百万份副本存储在各种中间或浏览器缓存中更有效。一些客户端会忽略缓存控制头，而且您真的不希望缓存被破坏，至少在生产中不希望。

在开发过程中，您可以按Ctrl + Shift + J（Chrome）并关闭缓存。

- Bryce