强制刷新缓存的CSS数据
是否有可能强制浏览器新鲜缓存的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语法中的示例，但几乎适用于任何服务器处理语言。
...因为一些应用程序传统上使用带有查询URL（在rel_path部分中包含“？”的GETs和HEAD）来执行具有显着副作用的操作，所以缓存不应将对这种URI的响应视为新鲜，除非服务器提供明确的到期时间。 这特别意味着HTTP / 1.0服务器对这些URI的响应不应该从缓存中获取。
将一个随机参数附加到包含在HTML中的CSS URL的末尾将强制一个新的请求，并且服务器应该以HTTP 200响应（不是304，即使它未被修改）。
<link href="normalfile.css?random=@Environment.TickCount" />
当然，如果我们将查询字符串与每个请求随机化，这将完全击败缓存。 对于生产应用来说，这很少/从不需要。
如果您只维护一些网址，则可以手动修改它们以包含内部版本号或日期：
@{
var assembly = Assembly.GetEntryAssembly();
var name = assembly.GetName();
var version = name.Version;
}
<link href="normalfile.css?build=@version.MinorRevision" />
这将在用户代理第一次遇到URL时引发新请求，但后续请求将主要返回304。 这仍然会导致发出请求，但至少不会提供整个文件。
路径修改
更好的解决方案是创建一条新路径。 通过一点努力，这个过程就可以自动地用一个版本号（或其他一致的标识符）重写路径。
这个答案显示了非微软平台的一些简单而优雅的选项。
微软的开发人员可以使用HTTP模块来拦截给定文件类型的所有请求，或者可能利用MVC路由/控制器组合来提供正确的文件（我还没有看到完成，但我相信这是可行的）。
当然，最简单的（不一定是最快或者最好的）方法就是对每个版本重新命名相关文件，并参考link标签中的更新路径。
TLDR
我认为重命名CSS文件是一个好得多的想法。 它可能不适合所有的应用程序，但它可以确保用户只需加载一次CSS文件。 在最后添加一个随机字符串将确保他们每次都必须下载它。 上面的JavaScript方法和apache方法也是如此。 有时候，简单的答案可能是最有效的。
另一个解决方案是
<FilesMatch ".(js|css)$">
Header set Cache-Control "max-age=86400, public"
</FilesMatch>
这将最大缓存时间限制为1天或86400秒。
余可能可以在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>
上一篇: Force refresh of cached CSS data
下一篇: iOS 6 Mobile Safari Session Variables not retained when set via AJAX