浏览器缓存CSS文件

Question

关于CSS和浏览器的一个快速问题。我尝试在SO上搜索了一些类似的帖子，但没有找到明确的答案。

我在我的Web项目中使用一两个CSS文件，并在网页的HEAD中引用它们。一旦我访问其中一个页面，CSS是否会被缓存，以便它不会被每个请求重新下载？我希望是这样的。IE、Firefox和Safari是否处理得不同？如果关闭了浏览器，当打开新的浏览器实例时，CSS是否会在第一次访问时刷新？

- jwalkerjr

---

标题中的“文件大小”部分有点误导人，因为实际问题根本不围绕文件大小。 “CSS文件和浏览器缓存”或“CSS文件的浏览器缓存”看起来更好一些... </twocents> - Már Örlygsson

Answer 1

你的文件 可能 会被缓存 - 但这取决于...

不同的浏览器具有略微不同的行为 - 最明显的是在处理来自服务器的模糊/有限的缓存标头时。如果您发送了明确的信号，浏览器几乎所有时间都会遵守。

迄今为止最大的差异在于不同Web服务器和应用程序服务器的默认缓存配置。

一些服务器（例如Apache）可能会使用HTTP标头为已知的静态文件类型提供服务，并鼓励浏览器将它们缓存，而其他服务器则可能会在每个响应中发送 no-cache 命令 - 无论文件类型如何。

...

因此，首先，阅读一些出色的 HTTP缓存教程 。对于我来说，内容发布者的HTTP缓存和缓存打破真正启发人心 :-)

接下来，安装并调整 Firebug 和 Live HTTP Headers 插件，以查找您的服务器实际发送的标头。

然后阅读您的Web服务器文档，以了解如何将它们调整到最佳状态（或说服系统管理员为您执行此操作）。

...

关于浏览器重新启动时会发生什么，这取决于浏览器和用户配置。

作为一个经验法则，应该预计在每次重新启动后，浏览器更有可能与服务器联系以查看是否有任何更改（请参阅If-Last-Modified和If-None-Match）。

如果您正确配置了服务器，则应该能够返回超短的304 Not Modified（成本非常低），之后浏览器将像往常一样使用缓存。

- M&#225;r &#214;rlygsson

---

Ctrl-K已经显示了“实时http标头”吗？为什么我们需要使用Live HTTP Header插件？ - Pacerier

Answer 2

回答第一个问题，是的，浏览器会缓存CSS文件（除非通过浏览器配置禁用）。许多浏览器都有重新加载页面但不使用缓存的快捷键组合。

如果您对CSS进行了更改，并希望用户立即看到它们，而不是等待浏览器在没有缓存的情况下重新加载文件，您可以通过向URL添加一些参数来更改CSS的提取方式，如下所示：

/style.css?modified=20012009

- Mark Tyler

---

天才！/Style.css?deployment={DeploymentId}注：这个短语的意思可能取决于它在特定上下文中的使用方式，因此上述翻译仅适用于一般情况。对于具体情况的翻译，请提供更多上下文信息。 - Paulius Zaliaduonis

这种行为是否得到RFC的支持？ - Pacerier

@Pacerier 是的，这是一种“支持”的做法。由于浏览器只把 /style.css?modified=20012009 视为一个URL，它等同于每次发布时更改CSS文件的名称。由于浏览器认为文件是新的，它不会尝试使用任何缓存版本。 - plowman

@plowman，我的意思是它在“野外”中可以工作，但这种行为是否得到了官方规范RFC标准的支持？ - Pacerier

看起来对我来说是一个相当标准的HTTP GET参数。你为什么认为它不会被支持呢？这里没有什么特别的事情发生... - Jesse Webb

Answer 3

正如之前的回答所述，这确实取决于与CSS文件一起发送的HTTP标头 - 只要您不在href中附加任何缓存破坏内容。例如：

<link href="/stylesheets/mycss.css?some_var_to_bust_cache=24312345" rel="stylesheet" type="text/css" />

一些框架（例如rails）默认会添加这些内容。

但是，如果你看到类似firebug或fiddler的东西，你就可以准确地查看每个请求中浏览器正在下载的内容——这对于找出浏览器实际在做什么非常有用，而不仅仅是应该做什么。

所有浏览器都应该以相同的方式尊重缓存头，除非配置为忽略它们（但肯定会有例外）。

- HermanD

Answer 4

值得注意的是，IE不会缓存通过@import方法调用其他css文件的css文件。例如，如果您的html页面链接到“master.css”，该文件通过@import引入“reset.css”，则IE不会缓存reset.css。

- Andy Ford

---

这似乎是一个非常重要的观点。你能加上一个参考文献吗？ - Liam

这似乎不是真的，参考链接：link，请看这条评论/回答：Murray | 27-May-09 at 9:52 am Steve， 我也听说当使用@import时，浏览器可能不会缓存CSS文件，而使用 link 时则不同。但我无法验证此事。您是否知道在缓存方面实际上是否有所影响？如果有的话，避免使用@import可能是另一个原因。Steve Souders | 27-May-09 at 2:26 pm Murray：我没有听说过这个问题，在我的测试中也没有发生这种情况。 - Henrik Stenbæk

Answer 5

这取决于您发送的CSS文件所附带的标头。检查您的服务器配置，因为您可能没有手动发送它们。 搜索“http缓存”以了解可以设置的不同缓存选项。 例如，您可以强制浏览器每次加载文件时下载新副本，或者您可以将文件缓存一周...

- Jan Hancic

Answer 6

除非您已经更改了服务器设置，否则它是被缓存的。所有浏览器都应该以相同的方式处理它。但有些人（比如我）可能已经配置了他们的浏览器，使其不缓存任何文件。关闭浏览器并不会使缓存中的文件失效。但是在服务器上更改文件应该会导致文件刷新。

- Al W

---

这大多是错误的。不同浏览器在缓存方面有所差异。一旦文件被客户端缓存，除非缓存（由于任何原因）过期，否则它不会再次下载，更改服务器上的文件不会有任何影响... - Jan Hančič

Answer 7

浏览器缓存是一件事。

但第二件事是服务器缓存。如果您的服务器支持CDN服务（内容分发网络），您的网页文件可以被缓存在一个或多个服务器上。即使您清除了浏览器缓存，添加版本或其他参数到链接URL中，您和其他用户的浏览器仍将从服务器缓存而不是更新的文件中加载页面。

我在我的服务器上遇到了这个问题，它默认开启了CDN。每次我更新一些CSS文件时，需要清除服务器缓存，否则浏览器仍然加载旧版本。服务器控制面板中有一个名为“CLEAN CDN CACHE”的特殊按钮。之后，页面会加载更新的内容，我相信其他用户也是如此。检查您的服务器控制面板是否有类似的选项，或者向服务器支持团队询问如何关闭CDN或不允许缓存。

一个.htaccess文件也可能有帮助，其中包含设置：

Header set Cache-Control "no-cache, no-store, private, must-revalidate"

它不允许缓存文件。但我不知道它是否适用于每种服务器类型（使用Apache应该可以）。

- Voytas