Html 将“?v=1”附加到链接和脚本标签中的 CSS 和 Javascript URL 有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3466989/
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
What does appending "?v=1" to CSS and Javascript URLs in link and script tags do?
提问by maxyfc
I have been looking at a HTML 5 boilerplate template (from http://html5boilerplate.com/) and noticed the use of "?v=1"in URLs when referring to CSS and Javascript files.
我一直在查看 HTML 5 样板模板（来自http://html5boilerplate.com/），并注意到"?v=1"在引用 CSS 和 Javascript 文件时使用了in URL。
- What does appending
"?v=1"to CSS and Javascript URLs in link and script tags do? - Not all Javascript URLs have the
"?v=1"(example from the sample below:js/modernizr-1.5.min.js). Is there a reason why this is the case?
"?v=1"在链接和脚本标签中附加到 CSS 和 Javascript URL 有什么作用？- 并非所有 Javascript URL 都具有
"?v=1"（以下示例中的示例：）js/modernizr-1.5.min.js。有没有原因造成这种情况？
Sample from their index.html:
来自他们的样本index.html：
<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=1">
<!-- For the less-enabled mobile browsers like Opera Mini -->
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/modernizr-1.5.min.js"></script>
<!------ Some lines removed ------>
<script src="js/plugins.js?v=1"></script>
<script src="js/script.js?v=1"></script>
<!--[if lt IE 7 ]>
<script src="js/dd_belatedpng.js?v=1"></script>
<![endif]-->
<!-- yui profiler and profileviewer - remove for production -->
<script src="js/profiling/yahoo-profiling.min.js?v=1"></script>
<script src="js/profiling/config.js?v=1"></script>
<!-- end profiling code -->
回答by Nick Craver
These are usually to make sure that the browser gets a new version when the site gets updated with a new version, e.g. as part of our build process we'd have something like this:
这些通常是为了确保当站点更新为新版本时浏览器获得新版本，例如作为我们构建过程的一部分，我们将有如下内容：
/Resources/Combined.css?v=x.x.x.buildnumber
Since this changes with every new code push, the client's forced to grab a new version, just because of the querystring. Look at this page (at the time of this answer) for example:
由于这随着每次新代码推送而改变，客户端被迫获取新版本，仅仅因为查询字符串。例如，查看此页面（在此回答时）：
<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">
I think instead of a revision number the SO team went with a file hash, which is an even better approach, even with a new release, the browsers only forced to grab a new version when the file actuallychanges.
我认为 SO 团队没有使用修订号，而是使用文件哈希，这是一种更好的方法，即使是新版本，浏览器也只会在文件实际更改时才被迫获取新版本。
Both of these approaches allow you to set the cache header to something ridiculously long, say 20 years...yet when it changes, you don't have to worry about that cache header, the browser sees a different querystring and treats it as a different, new file.
这两种方法都允许您将缓存标头设置为可笑的长，例如 20 年……但是当它发生变化时，您不必担心该缓存标头，浏览器会看到不同的查询字符串并将其视为不同的新文件。
回答by Amr Elgarhy
This makes sure you are getting the latest version from of the css or js file from the server.
这可确保您从服务器获取最新版本的 css 或 js 文件。
And later you can append "?v=2"if you have a newer version and "?v=3", "?v=4"and so on.
稍后您可以追加，"?v=2"如果您有更新的版本"?v=3", "?v=4"等等。
Note that you can use any querystring, 'v' is not a must for example:
请注意，您可以使用 any querystring， 'v' 不是必须的，例如：
"?blah=1" will work as well.
"?blah=1”也会起作用。
And
和
"?xyz=1002"will work.
"?xyz=1002"将工作。
And this is a common technique because browsers are now caching js and css files better and longer.
这是一种常见的技术，因为浏览器现在缓存 js 和 css 文件的时间越来越长。
回答by Art
The hash solution is nice but not really human readable when you want to know what version of file is sitting in your local web folder. The solution is to date/timestamp your version so you can easily compare it against your server file.
哈希解决方案很好，但当您想知道本地 Web 文件夹中的文件版本时，它并不是真正可读的。解决方案是date/time标记您的版本，以便您可以轻松地将其与您的服务器文件进行比较。
For example, if your .js or .cssfile is dated 2011-02-08 15:55:30(last modification) then the version should equal to .js?v=20110208155530
例如，如果您的.js or .css文件有日期2011-02-08 15:55:30（上次修改），则版本应等于.js?v=20110208155530
Should be easy to read properties of any file in any language. In ASP.Net it's really easy...
应该易于阅读任何语言的任何文件的属性。在 ASP.Net 中，这真的很容易...
".js?v=" + File.GetLastWriteTime(HttpContext.Current.Request.PhysicalApplicationPath + filename).ToString("yyMMddHHHmmss");
Of coz get it nicely refactored into properties/functions first and off you go. No more excuses.
当然，首先将它很好地重构为属性/函数，然后就可以了。别再找借口。
Good luck, Art.
祝你好运，艺术。
回答by Tapan kumar
In order to answer you questions;
为了回答您的问题；
"?v=1"this is written only beacuse to download a fresh copy of the the css and js files instead of using from the cache of the browser.
"?v=1"这只是因为下载 css 和 js 文件的新副本而不是从浏览器的缓存中使用。
If you mention this query string parameter at the end of your stylesheet or the js file then it forces the browser to download a new file, Due to which the recent changes in the .css and .js files are made effetive in your browser.
如果您在样式表或 js 文件的末尾提及此查询字符串参数，则它会强制浏览器下载一个新文件，因此 .css 和 .js 文件中的最近更改会在您的浏览器中生效。
If you dont use this versioning then you may need to clear the cache of refresh the page in order to view the recent changes in those files.
如果您不使用此版本控制，那么您可能需要清除刷新页面的缓存以查看这些文件中的最近更改。
Here is an article that explains this thing How and Why to make versioning of CSS and JS files
这里有一篇文章解释了如何以及为什么对 CSS 和 JS 文件进行版本控制
回答by Robin Day
Javascript files are often cached by the browser for a lot longer than you might expect.
Javascript 文件通常被浏览器缓存的时间比您预期的要长得多。
This can often result in unexpected behaviour when you release a new version of your JS file.
当您发布新版本的 JS 文件时，这通常会导致意外行为。
Therefore, it is common practice to add a QueryString parameter to the URL for the javascript file. That way, the browser caches the Javascript file with v=1. When you release a new version of your javascript file you change the url's to v=2 and the browser will be forced to download a new copy.
因此，通常的做法是向 javascript 文件的 URL 添加一个 QueryString 参数。这样，浏览器会缓存 v=1 的 Javascript 文件。当您发布新版本的 javascript 文件时，您将 url 更改为 v=2，浏览器将被迫下载新副本。
回答by Conete Cristian
During development / testing of new releases, the cache can be a problem because the browser, the server and even sometimes the 3G telco (if you do mobile deployment) will cache the static content (e.g. JS, CSS, HTML, img). You can overcome this by appending version number, random number or timestamp to the URL e.g: JSP: <script src="js/excel.js?time=<%=new java.util.Date()%>"></script>
在新版本的开发/测试期间，缓存可能是一个问题，因为浏览器、服务器甚至有时 3G 电信公司（如果您进行移动部署）会缓存静态内容（例如 JS、CSS、HTML、img）。您可以通过将版本号、随机数或时间戳附加到 URL 来克服这个问题，例如：JSP：<script src="js/excel.js?time=<%=new java.util.Date()%>"></script>
In case you're running pure HTML (instead of server pages JSP, ASP, PHP) the server won't help you. In browser, links are loaded before the JS runs, therefore you have to remove the links and load them with JS.
如果您运行纯 HTML（而不是服务器页面 JSP、ASP、PHP），服务器将不会帮助您。在浏览器中，链接是在 JS 运行之前加载的，因此您必须删除链接并使用 JS 加载它们。
// front end cache bust
var cacheBust = ['js/StrUtil.js', 'js/protos.common.js', 'js/conf.js', 'bootstrap_ECP/js/init.js'];
for (i=0; i < cacheBust.length; i++){
var el = document.createElement('script');
el.src = cacheBust[i]+"?v=" + Math.random();
document.getElementsByTagName('head')[0].appendChild(el);
}
回答by Phugo
As you can read before, the ?v=1ensures that your browser gets the version 1 of the file. When you have a new version, you just have to append a different version number and the browser will forget about the old version and loads the new one.
正如您之前所读到的，?v=1确保您的浏览器获取文件的版本 1。当你有一个新版本时，你只需要附加一个不同的版本号，浏览器就会忘记旧版本并加载新版本。
There is a gulpplugin which takes care of version your files during the build phase, so you don't have to do it manually. It's handy and you can easily integrate it in you build process. Here's the link: gulp-annotate
有一个gulp插件可以在构建阶段处理您的文件的版本，因此您不必手动执行此操作。它很方便，您可以轻松地将它集成到您的构建过程中。这是链接：gulp-annotate
回答by Ram
As mentioned by others, this is used for front end cache busting. To implement this, I have personally find grunt-cache-bust npm package useful.
正如其他人所提到的，这用于前端缓存破坏。为了实现这一点，我个人发现 grunt-cache-bust npm 包很有用。
