146

HTML 5 ボイラープレート テンプレート ( http://html5boilerplate.com/"?v=1"から) を見ていて、CSS および JavaScript ファイルを参照するときに URLで が使用されていることに気付きました。

  1. link および script タグの CSS および JavaScript URL への追加は何をし"?v=1"ますか?
  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

ハッシュ ソリューションは優れていますが、ローカル 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");

もちろん、最初にプロパティ/関数にうまくリファクタリングしてから始めてください。言い訳無用。

がんばれ、アート。

于 2011-02-08T16:10:37.040 に答える
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>

(サーバーページ 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);
}
于 2016-06-02T06:09:41.323 に答える