Html CSS 文件的浏览器缓存

Browser Caching of CSS files

提问by jwalkerjr

Quick question regarding CSS and the browser. I tried searching SO and found some similar posts, but nothing definitive.

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

I use one or two CSS files in my web projects. These are referenced in the HEAD of my web pages. Once I hit one of my pages, does the CSS get cached so that it's not re-downloaded with each request? I hope so. Do IE, Firefox and Safari handle this differently? If the browser is closed, is the CSS refreshed on the first visit when a new browser instance is opened?

我在我的 web 项目中使用一两个 CSS 文件。这些在我的网页的 HEAD 中被引用。一旦我点击我的一个页面，CSS 是否会被缓存，以便它不会随每个请求重新下载？但愿如此。IE、Firefox 和 Safari 对此的处理方式不同吗？如果浏览器关闭，当新的浏览器实例打开时，CSS 是否会在第一次访问时刷新？

采纳答案by Már ?rlygsson

Your file will probablybe cached - but it depends...

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

Different browsers have slightly different behaviors - most noticeably when dealing with ambiguous/limited caching headers emanating from the server. If you send a clear signal, the browsers obey, virtually all of the time.

不同浏览器的行为略有不同——在处理来自服务器的模糊/有限缓存标头时最明显。如果您发出明确的信号，浏览器几乎一直都会服从。

The greatest variance by far, is in the default caching configuration of different web servers and application servers.

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

Some (e.g. Apache) are likely to serve known static file types with HTTP headers encouraging the browser to cache them, while other servers may send no-cachecommands with every response - regardless of filetype.

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

...

...

So, first off, read some of the excellent HTTP caching tutorialsout there. HTTP Caching & Cache-Busting for Content Publisherswas a real eye opener for me :-)

所以，首先，阅读一些优秀的HTTP 缓存教程。内容发布者的 HTTP 缓存和缓存破坏让我大开眼界:-)

Next install and fiddle around with Firebugand the Live HTTP Headersadd-on , to find out which headers your server is actually sending.

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

Then read your web server docs to find out how to tweak them to perfection (or talk your sysadmin into doing it for you).

然后阅读您的 Web 服务器文档以了解如何将它们调整到完美（或让您的系统管理员为您做这件事）。

...

...

As to what happens when the browser is restarted, it depends on the browser and the user configuration.

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

As a rule of thumb, expect the browser to be more likely to check in with the server after each restart, to see if anything has changed (see If-Last-Modifiedand If-None-Match).

根据经验，每次重新启动后，浏览器更有可能与服务器签入，以查看是否有任何更改（请参阅If-Last-Modified和If-None-Match）。

If you configure your server correctly, it should be able to return a super-short 304 Not Modified(costing very little bandwidth) and after that the browser will use the cache as normal.

如果您正确配置您的服务器，它应该能够返回一个超短的304 Not Modified（花费很少的带宽），然后浏览器将正常使用缓存。

回答by Deniss Kozlovs

To the first part of your question - yes, browsers cache css files (if this is not disabled by browser's configuration). Many browsers have key combination to reload a page without a cache. If you made changes to css and want users to see them immediately instead of waiting next time when browser reloads the files without caching, you can change the way CSS ir served by adding some parameters to the url like this:

对于您问题的第一部分 - 是的，浏览器会缓存 css 文件（如果浏览器的配置未禁用此功能）。许多浏览器都有组合键来重新加载没有缓存的页面。如果您对 css 进行了更改并希望用户立即看到它们，而不是在浏览器重新加载文件而不进行缓存时等待下一次，您可以通过向 url 添加一些参数来更改 CSS ir 的服务方式，如下所示：

/style.css?modified=20012009

回答by DanSingerman

It does depend on the HTTP headers sent with the CSS files as both of the previous answers state - as long as you don't append any cachebusting stuff to the href. e.g.

它确实依赖于与 CSS 文件一起发送的 HTTP 标头，如前两个答案所述 - 只要您不向 href 附加任何缓存破坏的内容。例如

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

Some frameworks (e.g. rails) put these in by default.

一些框架（例如 rails）默认将这些放入。

However If you get something like firebugor fiddler, you can see exactly what your browser is downloading on each request - which is expecially useful for finding out what your browser isdoing, as opposed to just what it shouldbe doing.

然而，如果你得到类似firebug或fiddler 的东西，你可以准确地看到你的浏览器在每个请求上正在下载什么——这对于找出你的浏览器正在做什么特别有用，而不是它应该做什么。

All browsers shouldrespect the cache headers in the same way, unless configured to ignore them (but there are bound to be exceptions)

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

回答by Andy Ford

It's probably worth noting that IE won't cache css files called by other css files using the @import method. So, for example, if your html page links to "master.css" which pulls in "reset.css" via @import, then reset.css will not be cached by IE.

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

回答by Jan Han?i?

That depends on what headers you are sending along with your CSS files. Check your server configuration as you are probably not sending them manually. Do a google search for "http caching" to learn about different caching options you can set. You can force the browser to download a fresh copy of the file everytime it loads it for instance, or you can cache the file for one week...

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

回答by Al W

Unless you've messed with your server, yes it's cached. All the browsers are supposed to handle it the same. Some people (like me) might have their browsers configured so that it doesn't cache any files though. Closing the browser doesn't invalidate the file in the cache. Changing the file on the server should cause a refresh of the file however.

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