为什么要在 CSS 文件路径中添加版本号？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7671168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why adding version number to CSS file path?
提问by user966585
I noticed some websites put the version numbers (especially) in the CSS file path. For example:
我注意到一些网站将版本号（尤其是）放在 CSS 文件路径中。例如：
<link rel="stylesheet" type="text/css" href="style.css?v=12345678" />
What is the main purpose to put the version number? If the purpose is to remember when the CSS file was updated last time, shouldn't the version number added as a comment inside the CSS file?
放版本号的主要目的是什么？如果目的是记住上次更新 CSS 文件的时间，那么版本号不应该作为注释添加到 CSS 文件中吗？
回答by aviraldg
From HTML5 ★ Boilerplate Docs:
What is ?v=1" '?v=1' is the JavaScript/CSS Version Control with Cachebusting
Why do you need to cache JavaScript CSS? Web page designs are getting richer and richer, which means more scripts and stylesheets in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets etc.
How does HTML5 Boilerplate handle JavaScript CSS cache? HTML5 Boilerplate comes with server configuration files: .htacess, web.config and nginx.conf. These files tell the server to add JavaScript CSS cache control.
When do you need to use version control with cachebusting? Traditionally, if you use a far future Expires header you have to change the component's filename whenever the component changes.
How to use cachebusting? If you update your JavaScript or CSS, just update the "?v=1" to "?v=2", "?v=3" ... This will trick the browser think you are trying to load a new file, therefore, solve the cache problem.
什么是 ?v=1" '?v=1' 是带有 Cachebusting 的 JavaScript/CSS 版本控制
为什么需要缓存 JavaScript CSS？网页设计越来越丰富，这意味着页面中的脚本和样式表越来越多。页面的首次访问者可能需要发出多个 HTTP 请求，但通过使用 Expires 标头，您可以使这些组件可缓存。这避免了对后续页面视图的不必要的 HTTP 请求。Expires 标头最常用于图像，但它们应该用于所有组件，包括脚本、样式表等。
HTML5 Boilerplate 如何处理 JavaScript CSS 缓存？HTML5 Boilerplate 带有服务器配置文件：.htacess、web.config 和 nginx.conf。这些文件告诉服务器添加 JavaScript CSS 缓存控件。
什么时候需要使用带有缓存破坏的版本控制？传统上，如果您使用未来的 Expires 标头，您必须在组件更改时更改组件的文件名。
如何使用缓存破坏？如果您更新 JavaScript 或 CSS，只需将“?v=1”更新为“?v=2”、“?v=3”……这会欺骗浏览器认为您正在尝试加载新文件，因此，解决缓存问题。
回答by user219882
It's there to make sure that you have the current version. If you change your website and leave the name as before, browser may not notice the change and use old CSS from its cache. If you add version, the browser will download the new stylesheet.
它用于确保您拥有当前版本。如果您更改您的网站并保留以前的名称，浏览器可能不会注意到更改并使用其缓存中的旧 CSS。如果添加版本，浏览器将下载新的样式表。
回答by sandeep
If you set caches to expire far in the future adding ?v=2will let the server know this is a new file but you won't need to give it a unique name (saving you a global search and replace)
如果您将缓存设置为在将来过期很长时间，添加?v=2将使服务器知道这是一个新文件，但您无需为其指定唯一名称（为您节省全局搜索和替换）
HTM5 boilerplatealso includes it in their project.
HTM5 样板也将它包含在他们的项目中。
Check this video also: HTML5 Boilerplate Walkthrough.
另请查看此视频：HTML5 Boilerplate 演练。
回答by Aziz Shaikh
One of the reason could be to bypass file caching. Same name CSS files can be cached by the servers and may result in bad display if new version has has layout changes.
原因之一可能是绕过文件缓存。同名 CSS 文件可以被服务器缓存，如果新版本有布局更改，可能会导致显示效果不佳。
回答by oezi
This is to optimise browser-caching. You can set the header for CSS files to never expire so the browser will always get it from its cache.
这是为了优化浏览器缓存。您可以将 CSS 文件的标头设置为永不过期，以便浏览器始终从其缓存中获取它。
But if you do this, you'll get problems when changing the CSS file because some browsers might not notice the change. By adding/changing the version-parameter it's "another" request and so it won't be taken from the cache (but after the new version is cached, it's taken from there in the future to save bandwidth/number of requests until the version changes again).
但是如果你这样做，你会在更改 CSS 文件时遇到问题，因为某些浏览器可能不会注意到更改。通过添加/更改版本参数，它是“另一个”请求，因此不会从缓存中获取（但在缓存新版本后，将来会从那里获取以节省带宽/请求数量，直到版本又变了）。
A detailed explanation can be found at html5boilerplate.com.
可以在html5boilerplate.com上找到详细说明。
回答by Michael Nett
My knowledge is pretty much out of date regarding websites, but the variable stored in the 'href' argument is received by the browser through HTTP. Using the usual tricks in URL-rewriting you could actually have an arbitrary script that produces CSS-output when called. That output can differ, depending on the argument.
我对网站的了解几乎已经过时，但是浏览器通过 HTTP 接收存储在“href”参数中的变量。使用 URL 重写中的常用技巧，您实际上可以拥有一个在调用时生成 CSS 输出的任意脚本。该输出可能会有所不同，具体取决于参数。
