CSS文件缓存

Question

8

我有一个系统，缓存最大年龄设置为0，但存在问题：当我在style.css文件中进行了一些更改时，更改不会出现在客户端上。浏览器将使用旧版本的缓存css文件。我有一个简单的问题：将css文件命名为style.css?123会被缓存为新文件吗？

- Tim

你使用的是IIS服务器还是Apache？ - Zain Shaikh

5个回答

2

你可以添加一个唯一的查询字符串，但这会使用带宽。

你可以在每次更改时重命名CSS文件，例如：

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

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

- Tom Gullen

“main.css?v1” 如何比 “main-v1.css” 使用更多的带宽？（我猜我误读了你的回答。） - jensgram

main.css?v1实际上是相同的，我是指为了日期戳记，它会在每次加载时都加载，而你只需要在发生更改时加载它。在每次更改时以不同的名称命名CSS文件，或添加版本号的查询字符串是最好的两种方法。 - Tom Gullen

显然，使用查询字符串参数是不好的。请参阅http://stackoverflow.com/a/13377291/637609。 - Mark W

1

你可以通过为 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" />

- Kyle

显然，使用查询字符串参数是不好的。参见 http://stackoverflow.com/a/13377291/637609 - Mark W

1

是的，在每个style.css文件中添加一个查询字符串参数将强制它重新缓存。
因为浏览器会根据其URL缓存每个静态组件，所以当URL更改时，新文件将被缓存。

- Zain Shaikh

显然，使用查询字符串参数是不好的。请参见http://stackoverflow.com/a/13377291/637609。 - Mark W

1

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

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

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

想了解更多关于 .htaccess 文件的信息，请参考Apache .htaccess指南。

- MB_18

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jensgram · Accepted Answer

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

Google Web Fundamentals上有一篇关于HTTP缓存优化的好文章，特别是标题为“使缓存失效和更新缓存响应”的部分。

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

请注意，指纹不需要是连续的数字。只要冲突的风险有限，任何值-散列、版本等都可以。

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