12

一般的な方法は、css、javascript、および画像ファイルの有効期限をはるかに先に設定し、次のようなクエリ文字列を追加する（またはファイル名を変更する）ことで、ファイルが変更されたらすぐにすべてのブラウザが最新のコンテンツを取得するようにすることです。

これから<link rel="stylesheet" type="text/css" href="base.css">：

これに：

<link rel="stylesheet" type="text/css" href="base.css?v=1234">

また：

<link rel="stylesheet" type="text/css" href="base_1234.css">

しかし、cssファイルで参照されている画像はどうですか？

// Inside base.css 
background: url(/img/logo.png)

// Is this necessary(?):
background: url(/img/logo.png?v=1234)

または/img/logo.png、base.cssがファイル名をにbase.css?v=1234またはbase_1234.css自動的に変更したときにリロードされますか？

また、-tagsの画像はsrcどうimgですか？

4

3 に答える 3

10

ブラウザは絶対パスを決定した後にこれらのリクエストを行うため、この方法で静的アセットを「キャッシュバスティング」する場合は、どこで呼び出されても、ファイルごとに個別にリクエストを行う必要があります。ただし、バックエンドで変数にすることで、自分で簡単にすることができます。

文字列を変数として追加できます。この変数は、バックエンドの1か所で更新するだけで済みます。おそらくLESSやSASSなどのCSSプリプロセッサと組み合わせて、すべての画像を取得できます。

または、バージョンをベースURL（site.com/folder/styles.css => site.com/v123/folder/styles.css）に追加して、相対パスを使用します。これは、アプリの既存の静的アセットベースのURL変数に追加できます。その後、サーバーでは、UrlRewriteを使用してバージョンを削除できます。このようにして、CSSから比較的参照されるすべての画像も自動的にバージョンを取得し、同じ「キャッシュ無効化」効果をもたらします。

非常に賢く、バージョン管理システムからの最後のコミットハッシュとしてビルドプロセスの一部として変数を自動的に設定できます。これにより、将来のデバッグも容易になります。

于 2012-07-11T23:53:56.893 に答える
2

私の経験から、cssのキャッシュバスティングは再帰的ではありません。したがって、cssで参照される画像の最後にあるクエリ文字列は、キャッシュを無効にするために必要です。

すべての画像が新鮮であることを確認するには、クエリ文字列バージョン（img.png？v = 1234）でバストをキャッシュすることもできます。

于 2012-07-09T23:02:13.100 に答える
2

Chromeは、キャッシュを更新しないというブラウザの問題のほうが悪いようです（おそらく、使用している新しい予測キャッシングメソッドが原因です）。これを行う方法は、実際にはクエリ文字列を使用することです。

このWebサイトはさらに一歩進んで、すべてのタグに付加された単純なJavaScriptDate().getTime();メソッド（jQueryの有無にかかわらず）を使用しています。img

もう1つの解決策は、ブラウザがキャッシュから画像を取得して毎回ロードしないようにJavaScriptコードを作成することです。

上記の利点は、JavaScriptが1回のパスでこれを処理するため、クエリ文字列のために個々の画像ファイルの名前を変更する必要がないことです。

これを実現するためにJavaScriptを1行使用しますが、大きなCSSファイル内のすべての要素を追跡するほどメンテナンスが多くないimgため、時間がかかり、ファイルサイズが大きくなる可能性があります。

于 2012-07-13T08:16:43.843 に答える