如何强制浏览器刷新缓存的CSS?
这并不像每个请求那样简单。我们的网站已经稳定使用CSS一段时间了。
现在我们需要对CSS进行一些重大更新,但是已经缓存了CSS的浏览器将在几天内无法获取新的CSS,从而导致渲染问题。
是否有一种方法可以强制刷新CSS,还是我们最好选择特定版本的CSS URL?
如何强制浏览器刷新缓存的CSS?
这并不像每个请求那样简单。我们的网站已经稳定使用CSS一段时间了。
现在我们需要对CSS进行一些重大更新,但是已经缓存了CSS的浏览器将在几天内无法获取新的CSS,从而导致渲染问题。
是否有一种方法可以强制刷新CSS,还是我们最好选择特定版本的CSS URL?
有几个要考虑的问题和各种方法来解决这个问题。首先,规范
理想情况下,修改后的资源将在第一次请求时无条件地获取,并在过期之前从本地缓存中检索,而不需要任何后续服务器交互。
跟踪不同的排列组合可能有点混乱,所以我创建了以下表格。这些观察是通过从Chrome对IIS进行请求并在开发者控制台中观察响应/行为来生成的。
在所有情况下,新URL将导致HTTP 200。重要的是看 后续 请求会发生什么。
+---------------------+--------------------+-------------------------+
| Type | Cache Headers | Observed Result |
+---------------------+--------------------+-------------------------+
| Static filename | Expiration +1 Year | Taken from cache |
| Static filename | Expire immediately | Never caches |
| Static filename | None | HTTP 304 (not modified) |
| | | |
| Static query string | Expiration +1 Year | HTTP 304 (not modified) |
| Static query string | Expire immediately | HTTP 304 (not modified) |
| Static query string | None | HTTP 304 (not modified) |
| | | |
| Random query string | Expiration +1 Year | Never caches |
| Random query string | Expire immediately | Never caches |
| Random query string | None | Never caches |
+---------------------+--------------------+-------------------------+
然而,请记住浏览器和Web服务器并不总是按我们的预期行事。一个著名的例子:2012年移动Safari开始缓存POST请求。开发人员并不满意。
以ASP.Net MVC Razor语法为例,但几乎适用于任何服务器处理语言。
由于一些应用程序传统上使用GET和HEAD与查询URL(在rel_path部分中包含“?”)执行具有重大副作用的操作,因此缓存必须除非服务器提供显式的到期时间,否则不能将对这样的URI的响应视为新鲜的。特别是,HTTP / 1.0服务器对于此类URI的响应不应该从缓存中获取。
在HTML中包含的CSS URL的末尾添加一个随机参数将强制发出新请求,服务器应该用HTTP 200进行响应(即使它没有被修改,也不是304)。
<link href="normalfile.css?random=@Environment.TickCount" />
当然,如果我们每次请求都随机生成查询字符串,这将完全破坏缓存。 对于生产环境应用程序来说,这通常是不可取的/从不可取的。
如果您只维护少量的URL,您可以手动修改它们以包含构建号或日期:
@{
var assembly = Assembly.GetEntryAssembly();
var name = assembly.GetName();
var version = name.Version;
}
<link href="normalfile.css?build=@version.MinorRevision" />
第一次用户代理遇到URL时将引发新请求,但后续请求通常会返回304。这仍会引发请求,但至少不会服务整个文件。
更好的解决方案是创建一个新路径。通过一些努力,可以自动化此过程,以重新编写带有版本号(或其他一些一致的标识符)的路径。
这个答案展示了一些非Microsoft平台的简单而优雅的选项。
Microsoft开发人员可以使用HTTP模块拦截给定文件类型的所有请求,或可能利用MVC路由/控制器组合来提供正确的文件(我没有看到过这样的做法,但我相信这是可行的)。
当然,最简单的方法(不一定是最快或最佳的方法)就是在每次发布时重命名所涉及的文件,并在link
标记中引用更新的路径。
<FilesMatch "\.(js|css)$">
Header set Cache-Control "max-age=86400, public"
</FilesMatch>
这将限制最大缓存时间为1天或86400秒。
$siteCSS = "/css/standard.css?" .filemtime($_SERVER['DOCUMENT_ROOT']. "/css/standard.css");
<link rel="stylesheet" type="text/css" media="all" href="<?php echo $siteCSS?>" />
你可能可以在Apache中完成它...
<FilesMatch "\.(html|htm|js|css)$">
FileETag None
<IfModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</IfModule>
</FilesMatch>