ブラウザにキャッシュされたイメージを再読み込みさせます。

Question

。ボタン{ 背景：url（../ Images/button.png）; }

問題：パフォーマンス上の理由から、すべての静的コンテンツには有効期限ヘッダーがあり、ブラウザによってキャッシュされます。画像が変更されると、ユーザーはキャッシュをリフレッシュする必要があります（IEではCtrl + F5）。画像をキャッシュしたいが、必要なときには自動的に画像を再読み込みする必要がある。

質問：は次に有効ですか？ V = 1234私のサイトのバージョンである

.button { 
    background: url(../Images/button.png?v=1234); 
} 

。私はそれがCSSでこのようなことを書くのが100％有効かどうか分からず、バージョンが同じであればブラウザは画像をキャッシュしておきたい。現代のブラウザーはすべて、URLパラメーターのデータを正しくキャッシュしますか？

ありがとうございました。

Answer 1

最近のブラウザでは、ブラウザで画像のアドレス（?v=1234を含む）を見て、キャッシュされていないことを確認して新鮮なものを送信します要求。

Answer 2

これは、High Performance Web Sitesのルール3：「期限切れまたはキャッシュ制御ヘッダーの追加」で説明しています。推奨されるアプローチの1つは、サイトではなくファイルのバージョンを変更することです。 accompanying blogから

：

あなたは遠い将来を使用する場合はいつでもコンポーネントの変更、コンポーネントのファイル名を変更する必要がExpiresヘッダを、覚えておいてください。 Yahoo!この手順をビルドプロセスの一部にすることがよくあります。バージョン番号は、コンポーネントのファイル名に埋め込まれています（例：yahoo_2.0.6.js）。