146

我一直在查看 HTML 5 样板模板（来自http://html5boilerplate.com/），并注意到"?v=1"在引用 CSS 和 JavaScript 文件时使用 in 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 -->
4

8 回答 8

188

这些通常是为了确保在网站更新为新版本时浏览器获得新版本，例如，作为我们构建过程的一部分，我们会有这样的东西：

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

由于每次新代码推送都会发生这种情况，因此客户端被迫获取新版本，只是因为查询字符串。看看这个页面（在这个答案的时候）例如：

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

我认为 SO 团队使用文件哈希而不是修订号，这是一种更好的方法，即使使用新版本，浏览器也只会在文件实际更改时才强制获取新版本。

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

于 2010-08-12T11:14:47.393 回答
26

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

"?v=2"如果您有更新的版本等，稍后您可以追加"?v=3", "?v=4"。

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

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

和

"?xyz=1002"将工作。

这是一种常见的技术，因为浏览器现在缓存 js 和 css 文件的时间越来越长。

于 2010-08-12T11:12:52.577 回答
13

当您想知道本地网络文件夹中的文件版本时，哈希解决方案很好，但不是真正的人类可读。解决方案是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");

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

祝你好运，艺术。

于 2011-02-08T16:10:37.040 回答
9

为了回答您的问题；

"?v=1"这只是为了下载 css 和 js 文件的新副本而不是从浏览器的缓存中使用而编写的。

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

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

这是一篇解释这件事的文章如何以及为什么对 CSS 和 JS 文件进行版本控制

于 2013-10-08T12:50:26.180 回答
7

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

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

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

于 2010-08-12T11:14:48.547 回答
2

在新版本的开发/测试期间，缓存可能会成为问题，因为浏览器、服务器甚至有时 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);
}
于 2016-06-02T06:09:41.323 回答
0

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

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

于 2017-04-14T17:10:02.887 回答
-2

正如其他人所提到的，这用于前端缓存破坏。为了实现这一点，我个人发现 grunt-cache-bust npm 包很有用。

于 2018-01-24T18:11:19.610 回答