为什么要在 CSS 文件路径中添加版本号？答案

【问题标题】：Why adding version number to CSS file path?为什么要在 CSS 文件路径中添加版本号？
【发布时间】：2011-10-06 07:09:08
【问题描述】：

我注意到一些网站将版本号（尤其是）放在 CSS 文件路径中。例如：

<link rel="stylesheet" type="text/css" href="style.css?v=12345678" />

放版本号的主要目的是什么？如果目的是为了记住上次更新 CSS 文件的时间，不应该在 CSS 文件中添加版本号作为注释吗？

【问题讨论】：

What does appending "?v=1" to CSS and Javascript URLs in link and script tags do?的可能重复

标签： css

【解决方案1】：

来自HTML5 ★ Boilerplate Docs：

什么是 ?v=1" '?v=1' 是 JavaScript/CSS 版本控制缓存破坏

为什么需要缓存 JavaScript CSS？网页设计越来越越来越丰富，这意味着更多的脚本和样式表在页。首次访问您的页面的访问者可能需要创建几个 HTTP 请求，但是通过使用 Expires 标头，您可以创建这些组件可缓存的。这避免了后续页面上不必要的 HTTP 请求意见。过期标头最常用于图像，但它们应该用于所有组件，包括脚本、样式表等。

HTML5 Boilerplate 如何处理 JavaScript CSS 缓存？ HTML5 Boilerplate 附带服务器配置文件：.htacess， web.config 和 nginx.conf。这些文件告诉服务器添加 JavaScript CSS 缓存控件。

什么时候需要将版本控制与 cachebusting 结合使用？传统上，如果您使用遥远的未来 Expires 标头，您必须每当组件更改时更改组件的文件名。

如何使用缓存清除？如果您更新 JavaScript 或 CSS，只需将 "?v=1" 更新为 "?v=2", "?v=3" ...这会欺骗浏览器认为您正在尝试加载新文件，因此，解决缓存问题。

【讨论】：

您可以使用 PHP 动态执行此操作，强制它在保存时更改版本号。以下是 WordPress 的示例。 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?v=' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
请指导我如何添加版本变量。我的意思是它将如何工作。谢谢

【解决方案2】：

它可以确保您拥有当前版本。如果您更改您的网站并像以前一样保留名称，浏览器可能不会注意到更改并使用其缓存中的旧 CSS。如果添加版本，浏览器会下载新的样式表。

【讨论】：

【解决方案3】：

如果您将缓存设置为在将来过期，添加?v=2 会让服务器知道这是一个新文件，但您不需要给它一个唯一的名称（为您节省全局搜索和替换）

HTM5 boilerplate 也将其包含在他们的项目中。

也请查看此视频：HTML5 Boilerplate Walkthrough。

【讨论】：

【解决方案4】：

其中一个原因可能是绕过文件缓存。同名 CSS 文件可以被服务器缓存，如果新版本有布局更改，可能会导致显示不良。

【讨论】：

【解决方案5】：

这是为了优化浏览器缓存。您可以将 CSS 文件的标头设置为永不过期，以便浏览器始终从其缓存中获取它。

但如果你这样做，你会在更改 CSS 文件时遇到问题，因为某些浏览器可能不会注意到更改。通过添加/更改版本参数，它是“另一个”请求，因此它不会从缓存中取出（但在新版本被缓存后，它会在未来从那里取出以节省带宽/请求数量直到版本再次更改）。

详细解释可以在html5boilerplate.com找到。

【讨论】：

【解决方案6】：

我对网站的了解几乎已经过时，但是浏览器通过 HTTP 接收到存储在“href”参数中的变量。使用 URL 重写中的常用技巧，您实际上可以拥有一个在调用时产生 CSS 输出的任意脚本。该输出可能会有所不同，具体取决于参数。

【讨论】：

如何在 css 文件中使用该参数值？