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

标签 html css browser-cache

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

  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 团队使用文件哈希而不是修订号,这是一种更好的方法,即使是新版本,浏览器也只会在文件实际上 变化。

这两种方法都允许您将缓存 header 设置为非常长的时间,比如 20 年......但是当它发生变化时,您不必担心缓存 header ,浏览器会看到不同的查询字符串并对待它作为一个不同的新文件。

关于html - 将 "?v=1"附加到链接和脚本标记中的 CSS 和 JavaScript URL 有什么作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3466989/

相关文章:

html - 我可以通过缓存动态加载 Web 组件引用的数据吗?

caching - 应用程序缓存存储项目有空响应?

ios - 如何从iOS应用中清除保存的密码或表单数据

javascript - 如何制作一个 javascript 数字键盘弹出窗口

javascript - 如何使用 jquery 访问给定 div 的字母数字 ID?(语法)

html - 如何省略样式表以将样式应用于其他网页

css - 将 float 元素与图像和文本对齐

javascript - JQuery - 查找任何级别的所有后代,但不是这些后代的后代

javascript - 出现背景图像的问题

html - 是否可以在 CSS 中将表格的宽度设置为 "auto"但确认宽度属性?