1. ホーム
  2. html

[解決済み] linkタグやscriptタグでCSSやJavaScriptのURLに"?v=1 "を付加すると、どのような効果がありますか?

2022-05-08 21:57:53

質問

HTML 5 のボイラープレート・テンプレート ( http://html5boilerplate.com/ を使用していることに気がつきました。 "?v=1" は、CSSやJavaScriptのファイルを参照する際に、URLの中に含まれています。

  1. を追加するとどうなるのでしょうか? "?v=1" を、linkタグやscriptタグの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年といった途方もない長さに設定することができます。それでも、変更されたときにはキャッシュヘッダを気にする必要はなく、ブラウザは異なるクエリストリングを見て、それを別の新しいファイルとして扱います。