将"?v = 1"附加到链接和脚本标记中的CSS和Javascript URL有什么作用?

max*_*yfc 130 html css browser-cache

我一直在查看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 -->
Run Code Online (Sandbox Code Playgroud)

提前致谢.

Nic*_*ver 167

这些通常是为了确保当网站使用新版本更新时浏览器获得新版本,例如,作为构建过程的一部分,我们将使用以下内容:

/Resources/Combined.css?v=x.x.x.buildnumber
Run Code Online (Sandbox Code Playgroud)

由于每次新代码推送都会发生变化,因此客户端不得不抓住新版本,因为查询字符串.看一下这个页面(在这个答案的时候),例如:

<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">
Run Code Online (Sandbox Code Playgroud)

我认为SO团队使用文件哈希来代替修订号,这是一种更好的方法,即使有新版本,浏览器也只是在文件实际发生变化时被迫获取新版本.

这两种方法都允许您将缓存标头设置为可笑的长度,比如20年......但是当它发生变化时,您不必担心缓存标头,浏览器会看到不同的查询字符串并将其视为不同的新文件.

  • @Free - 缓存这些文件的方式是*forever*,这意味着客户端*不会*检查文件是否被修改.这意味着他们将*永远不会*获取更新的文件...除非URL发生变化,这就是上述技术所发生的情况.您可以在客户端上获得最长的缓存时间(最少的HTTP请求),但是当文件实际更改时,客户端会立即更新*.究竟如何使用*only*缓存控制头完成所有这些? (8认同)
  • @GMsoF v代表我们的"版本",它是一个完全随意的选择.任何值查询字符串都可以工作,例如它可以很容易吗?jejdutogjesudo = (5认同)
  • @Free - Stack Overflow每月获得500万访问者,您的方法将产生2个影响:a)*多个*更多请求和数据发送到/来自我们的服务器,以及b)用户不会*立即*获取新的JavaScript/CSS(例如,当我们遇到错误,或者HTML更改需要新的JS/CSS时).自然到期真的不是一个选择.您提出的方法在技术上效率会低得多,结果是*实际用户错误*,定期...在任何主要网站上都不是真正可以接受的(也不应该是真正的*任何*网站) . (4认同)
  • @Free - 发送*昨天*的缓存控制头无法告诉客户端今天更改的文件(客户端甚至不会检查),一个URL就可以了.你能解释我在那里失踪的东西吗? (3认同)
  • @Free - 500万是500万[**访客**每月](http://www.quantcast.com/p-c1rF4kxgLUzNc),因为我们每天*多次部署*,请求很多次.就HTML页面加载而言,我们每个月的讨论量超过1.1亿(而且还在增长......再次*只有*HTML页面加载).对于a)是,更多或更多中断,无论是缓存时间还是具有正确内容的客户端,都是一种权衡.另外,你对b)的逻辑是有缺陷的,html是*没有*缓存,因此与缓存的JS一起使用,不再有效意味着*只有*缓存用户受到影响,而不是它们免疫. (2认同)
  • @Santhos我们使用一个简单的字典来计算是否缺少以获取哈希值-因此我们在每个应用程序生命周期内仅读取和哈希一次文件...这确实很便宜。由于几乎所有网站的构建都会*开始并停止*特定的应用程序域或进程*,因此简单的内存缓存非常有效。文件更改后,无论如何您都在重新计算。 (2认同)
  • 9年后,这句话还适用吗?有没有关于这个功能的官方文档? (2认同)

Amr*_*rhy 22

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

"?v=2"如果你有更新版本"?v=3", "?v=4"等等,你可以追加.

请注意,你可以使用任何querystring,'v'不是必须的例如:

"?blah=1"也会奏效.

"?xyz=1002" 将工作.

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


小智 13

当您想要知道本地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");
Run Code Online (Sandbox Code Playgroud)

因为它首先将它很好地重构为属性/功能,然后离开.别再找借口.

祝你好运,艺术.

  • 如果您仅使用html js和css构建网站,该怎么办?那么我们如何自动将版本名称注入静态资源呢? (2认同)

Rob*_*Day 7

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

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

因此,通常的做法是将QueryString参数添加到javascript文件的URL中.这样,浏览器使用v = 1缓存Javascript文件.当您发布新版本的javascript文件时,将URL更改为v = 2,浏览器将被强制下载新副本.


小智 7

为了回答你的问题;

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

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

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

这篇文章解释了这个东西如何以及为什么要对CSS和JS文件进行版本控制