ブラウザのCSS、JavaScript、背景画像のキャッシュをクリアする簡単な方法

実際のプロジェクト開発プロセスでは、ページがサーバーにアップロードされます。サーバーへの負荷を軽減し、ユーザーの負荷を軽減するために、ブラウザは画像、CSS、JS をローカルにキャッシュし、次回 Web サイトにアクセスしたときに使用できるようにします。そうすることで、サーバーへの負荷が軽減されるだけでなく、ユーザーのダウンロード数も減り、ユーザーエクスペリエンスが向上します。

しかし、バージョンアップしたり、CSS、JS などに調整を加えたりした場合、キャッシュのせいで更新されたスタイルを表示できなくなり、ユーザーには頭痛の種となります。ユーザーが手動でキャッシュをアップグレードしない限り、ほとんどのユーザーは、それがキャッシュの問題であるかどうかわからないため、Web サイトに通常どおりアクセスするために手動でキャッシュをクリアすることはありません。結局のところ、ユーザーはページに問題があり、正常にアクセスできないと考えるだけです。

キャッシュを正常に使用し、このような問題を回避するには、この問題をどのように解決するかを頭を使って考えてみましょう。

変更したスタイルに正常にアクセスできない場合は、スタイルファイル名を変更してみてはいかがでしょうか。答えは「はい」ですが、ここでは検証しません。しかし、毎回手動でファイル名を変更するのは明らかに面倒です。ファイル名を変更しないようにすることは可能ですか？答えはイエスです。インポートされたファイル名の後に、以前のバージョンとは異なるバージョン番号 (通常は更新日) が追加されることがあります。コードは次のとおりです。

コードをコピー

コードは次のとおりです。

CSS ファイル名と JS ファイル名の後に「v=20140829」が続いているのがわかります。こうすることで、ファイル名を変更せずにファイルをキャッシュし、リアルタイムで更新することができます。「v=20140829」は一般的な書き方の習慣であり、他のものに変更できます。

最後に、画像があります。通常、img タグが付いた画像の名前は、バックグラウンドでファイル名が生成されるため、重複することはありません。ファイル名が固定されている画像の場合は、方法は上記と同じです。背景画像については、スタイル名が変更されるので、当然、画像解像度パスも同期して更新されるため、背景画像も更新されます。

<<: MySQL でよく使用されるデータベースとテーブルシャーディングソリューションの概要

>>: HTMLの基本概念の詳細な説明