在链接和脚本标签中的CSS和Javascript URL后面附加“？v = 1”有什么作用？

我一直在查看HTML 5样板模板（来自http://html5boilerplate.com/），并注意到"?v=1"在引用CSS和Javascript文件时在URL中的使用。

1. "?v=1"在链接和脚本标记中附加到CSS和Javascript URL有什么作用？
2. 并非所有的Javascript URL都有"?v=1"（示例来自以下示例：）js/modernizr-1.5.min.js。有这种原因吗？

来自他们的样本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 -->

这些通常是为了确保在网站更新为新版本时浏览器获得新版本，例如，在我们的构建过程中，我们将具有以下内容：

/Resources/Combined.css?v=x.x.x.buildnumber

由于每次输入新代码都会改变这种情况，因此仅由于查询字符串，客户端就不得不获取新版本。例如，查看此页面（在回答此问题时）：

<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">

我认为SO团队可以使用文件哈希来代替修订号，这是一种更好的方法，即使使用了新版本，浏览器也只在文件实际更改时才强制使用新版本。

这两种方法都允许您将缓存标头设置为非常长的时间，例如20年。然而，当它更改时，您不必担心该缓存标头，浏览器会看到不同的查询字符串并将其视为不同的新文件。

这可以确保您从服务器的css或js文件中获取最新版本。

然后，"?v=2"如果您有较新的版本，则可以追加"?v=3", "?v=4"，依此类推。

请注意，您可以使用any querystring，例如，'v'不是必须的：

"?blah=1”也将起作用。

和

"?xyz=1002" 将工作。

这是一种常见的技术，因为浏览器现在可以更好，更长地缓存js和css文件。

当您想知道本地Web文件夹中的文件版本时，哈希解决方案是不错的选择，但并不是真正可读的。解决方案是date/time标记您的版本，以便您可以轻松地将其与服务器文件进行比较。

例如，如果您的.js or .css文件标有日期2011-02-08 15:55:30（最后修改），则版本应等于.js?v=20110208155530

应该易于阅读任何语言的任何文件的属性。在ASP.Net中，这非常容易...

".js?v=" + File.GetLastWriteTime(HttpContext.Current.Request.PhysicalApplicationPath + filename).ToString("yyMMddHHHmmss");

首先，将它很好地重构为属性/函数，然后就可以使用了。别再找借口。

祝你好运，艺术。

Javascript文件通常被浏览器缓存的时间比您预期的要长得多。

当您发布新版本的JS文件时，这通常可能导致意外行为。

因此，通常的做法是将QueryString参数添加到javascript文件的URL。这样，浏览器将v = 1缓存在Javascript文件中。当您发布新版本的javascript文件时，您将网址更改为v = 2，浏览器将被迫下载新副本。

为了回答您的问题；

编写 “？v = 1”仅是为了下载css和js文件的新副本，而不是从浏览器的缓存中使用。

如果您在样式表或js文件的末尾提到此查询字符串参数，则它将强制浏览器下载新文件，因此，.css和.js文件中的最新更改在浏览器中生效。

如果不使用此版本控制，则可能需要清除刷新页面的缓存，以查看这些文件中的最新更改。

这是一篇介绍此事的文章，介绍了如何以及为什么对CSS和JS文件进行版本控制

在开发/测试新版本期间，缓存可能会成为问题，因为浏览器，服务器甚至3G电信公司（如果您进行移动部署）有时会缓存静态内容（例如JS，CSS，HTML，img）。您可以通过在URL上附加版本号，随机数或时间戳来克服此问题，例如：JSP：<script src="js/excel.js?time=<%=new java.util.Date()%>"></script>

如果您运行的是纯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);
}

如您之前所读，请?v=1确保您的浏览器获取文件的版本1。当您拥有一个新版本时，只需添加一个不同的版本号，浏览器就会忘记旧版本并加载新版本。

有一个gulp插件可以在构建阶段处理文件的版本，因此您无需手动进行。它很方便，您可以轻松地将其集成到构建过程中。这是链接：gulp-注释

正如其他人所提到的，这用于前端缓存清除。为此，我个人发现grunt-cache-bust npm软件包很有用。