2011-10-06 22 views
22

私はいくつかのウェブサイトがCSSファイルパスにバージョン番号(特に)を入れていることに気付きました。例:CSSファイルパスにバージョン番号を追加するのはなぜですか?

<link rel="stylesheet" type="text/css" href="style.css?v=12345678" /> 

バージョン番号を入力する主な目的は何ですか? CSSファイルが最後に更新されたときを覚えておくことが目的ならば、バージョン番号をCSSファイル内のコメントとして追加しないでください。

+0

[リンクとスクリプトタグのCSSとJavascriptのURLに「?v = 1」を追加するとどうなるでしょうか?](http://stackoverflow.com/questions/3466989/what-does-appending-v- 1-to-css-and-javascript-urls-in-link-and-script-tags-do) – zanetu

答えて

38

ある何V = 1" あなたがJavaScriptのCSSをキャッシュする必要があるのはなぜ

をキャッシュ消去 ではJavaScript/CSSのバージョン管理されたWeb? 'V = 1は?'?ページデザインは がより豊かで豊かになります。これは、 ページでより多くのスクリプトとスタイルシートを意味します。ページへの初めての訪問者は、いくつかのHTTP リクエストを行う必要がありますが、Expiresヘッダーを使用すると、これはunneceを避ける後続のページでssary HTTP要求が表示されます。 期限切れヘッダーは画像で最もよく使用されますが、スクリプト、スタイルシートなどのすべてのコンポーネントで を使用する必要があります。

HTML5ボイラープレートはJavaScript CSSキャッシュをどのように処理しますか? HTML5 ボイラープレートには、サーバー構成ファイル(.htacess、 web.configおよびnginx.conf)が付属しています。これらのファイルは、サーバに JavaScript CSSキャッシュコントロールを追加するよう指示します。

いつキャッシュバスト処理でバージョンコントロールを使用する必要がありますか? 伝統的に、Expiresヘッダーを将来使用する場合は、コンポーネントが変更されるたびに コンポーネントのファイル名を変更する必要があります。

cachebustingの使用方法は? JavaScriptまたはCSSを更新した場合、 は "?v = 1"を "?v = 2"、 "?v = 3"に更新します...これはブラウザを騙すでしょう 新しいファイルを読み込もうとしていると思いますしたがって、キャッシュを解決する 問題。

+9

PHPを使用して動的に行うことで、保存時にバージョン番号を変更することができます。以下はWordPressの例です。 '' '' link rel = ""スタイルシート "href =" <?php bloginfo( 'stylesheet_url');エコー '?v ='ファイルの時間(get_stylesheet_directory()。 '/style.css');?> "type =" text/css "media =" screen、projection "/> – Justin

+0

バージョン変数を追加するにはどうすればいいですか?私はそれがどのように機能するかを意味します。ありがとう –

5

現在のバージョンを使用していることを確認する必要があります。以前のようにウェブサイトを変更してその名前を残すと、ブラウザはその変更に気付かず、キャッシュから古いCSSを使用することがあります。バージョンを追加すると、ブラウザは新しいスタイルシートをダウンロードします。 http://html5boilerplate.com/docs/Version-Control-with-Cachebusting/から

1

これはブラウザキャッシングを最適化するためのものです。 cssファイルのヘッダーを期限切れにしないように設定して、ブラウザがキャッシュから取得できるようにすることができます。

しかし、これを行うと、一部のブラウザで変更が気付かないことがあるので、CSSファイルを変更するときに問題が発生します。バージョンパラメータを追加/変更することで、それは "別の"要求なので、カヘからは取得されません(しかし、新しいバージョンがキャッシュされた後は、将来バージョン/再び変化する)。

詳細な説明は私の知識がウェブサイトに関する期限切れのほとんどが、「HREF」引数に格納された変数は、HTTP経由のブラウザで受信されるhtml5boilerplate.com

0

でfoudnすることができます。通常のトリックを使ってURLを書き直すと、呼び出されたときにCSS出力を生成する任意のスクリプトを実際に作成することができます。その出力は、引数によって異なる場合があります。

2

サーバーが、これは新しいファイルですが、あなたはそれに一意の名前を与える必要はありませんお知らせします?v=2を追加し、将来的にはるかに有効期限が切れるようにキャッシュを設定した場合

(あなたのグローバル検索を保存し、交換してください)

HTM5 boilerplateもプロジェクトに含まれます。その理由の一つは、ファイルのキャッシュをバイパスすることができ、このビデオはまたhttp://www.youtube.com/watch?v=oDlsOyPKUTM&feature=player_embedded

2

チェック。同じ名前のCSSファイルがサーバによってキャッシュされる可能性があり、新しいバージョンにレイアウトが変更されていると、表示が悪くなる可能性があります。

関連する問題