Css 文件缓存答案

【问题标题】：Css file cachingCss 文件缓存
【发布时间】：2019-12-15 06:46:36
【问题描述】：

我有一个系统，其中缓存 max-age 设置为 0，并且出现问题，当我对 style.css 进行了一些更改时，更改不会显示给客户端。浏览器将使用旧的缓存版本的 css。我有一个简单的问题：将 css 文件命名为 style.css?123 是否会被缓存为新文件？

【问题讨论】：

标签： css caching

【解决方案1】：

是的，向资源的 URI 添加唯一的查询字符串将强制客户端获取“新”版本（因为客户端不知道它只是以前缓存资源的更新）。这称为指纹识别，您通常使用 CSS 文件的时间戳或递增的版本号¹。

Google Web Fundamentals 在HTTP cache optimization 上有一篇很棒的文章。尤其是标题为“使缓存响应失效和更新：”的部分：

您如何获得两全其美：客户端缓存和快速更新？您更改资源的 URL 并强制用户在其内容更改时下载新响应。通常，您可以通过在文件名中嵌入文件的指纹或版本号来执行此操作，例如 style.x234dff.css。

请注意，指纹不需要是序列号。只要冲突风险有限，任何值（哈希、版本等）都可以。

¹⁾ 这是在 SO 上所做的，例如http://sstatic.net/js/global-login.js?v=12

【讨论】：

【解决方案2】：

您可以附加一个唯一的查询字符串，尽管这会占用带宽。

您可以在每次进行更改时重命名您的 CSS 文件，IE：

main-v1.css 主 v2.css main-v3.css

然后在您的页面中重新引用它。这样可以节省带宽并强制浏览器重新加载。

【讨论】：

main.css?v1 将如何使用比main-v1.css 更多的带宽？（我想我误读了你的答案。）
main.css?v1 实际上是相同的，我的意思是用于日期标记，它会每次加载它，当您只需要在发生更改时加载它。在每次更改时以不同的方式命名 css 文件，或添加版本号的查询字符串是 2 种最佳方法。
显然，使用查询字符串参数是不好的。见stackoverflow.com/a/13377291/637609

【解决方案3】：

使用 .htaccess 文件，您可以在具有特殊扩展名的文件上定义缓存控制。

您可以在 .htaccess 文件中包含以下代码：

<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

有关 .htaccess 文件的更多信息，请参阅Apache .htaccess Guide

【讨论】：

【解决方案4】：

是的，在每个 style.css 文件中附加一个查询字符串参数将强制它再次缓存。
因为浏览器会缓存每个静态组件的url，所以当url改变时，新的文件会被缓存。

【讨论】：

【解决方案5】：

你可以通过给你的 CSS 加上时间戳来欺骗浏览器，让它每秒钟都认为它是一个新的样式表：

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />

这会给你这个：

<link rel="stylesheet" type="text/css" href="style.css?Thursday 24th of April 2008 04:45:21 PM" />

【讨论】：