リンクおよびスクリプトタグの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"。

あなたがいずれかを使用できることに注意してくださいは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");

cozは、最初にプロパティ/関数にうまくリファクタリングして、実行します。言い訳無用。

がんばって、アート。

多くの場合、JavaScriptファイルは、予想以上に長い時間ブラウザによってキャッシュされます。

これにより、JSファイルの新しいバージョンをリリースするときに予期しない動作が発生することがよくあります。

したがって、JavaScriptファイルのURLにQueryStringパラメータを追加するのが一般的です。これにより、ブラウザーはv = 1のJavaScriptファイルをキャッシュします。JavaScriptファイルの新しいバージョンをリリースするとき、URLを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>

（サーバーページJSP、ASP、PHPの代わりに）純粋なHTMLを実行している場合、サーバーは役に立ちません。ブラウザでは、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-annotate

他の人が述べたように、これはフロントエンドのキャッシュ無効化に使用されます。これを実装するために、私は個人的にgrunt-cache-bust npmパッケージが便利だと思います。