ブラウザーによる静的ファイルのキャッシュを回避する方法

ブラウザが静的リソースをキャッシュしないようにするにはどうすればよいですか?この記事では、ブラウザが静的リソースをキャッシュしないようにするためのいくつかの方法を紹介します。必要な方は参考にしていただければ幸いです。

ブラウザのキャッシュを回避する必要があるのはなぜですか?

職場の多くのシナリオでは、ブラウザーのキャッシュを回避する必要があります。たとえば、CSS、JS、画像などに変更を加えて Web ページを更新しても、まったく効果がありません。 . キャッシュには理由があるからです。

したがって、js または css を頻繁に変更する必要がある場合は、ブラウジングがキャッシュされないようにする必要があります。

ブラウザのキャッシュが静的ファイルをキャッシュしないようにするにはどうすればよいですか?

ブラウザーのキャッシュを防ぐ方法を紹介します:

1. リクエストを行うときにキャッシュを無効にしたい場合は、リクエスト ヘッダーを設定します。 ##

Cache-Control: no-cache, no-store, must-revalidate

2. バージョン番号を増やす

これは一般的な方法です:

<link rel="stylesheet" type="text/css" href="../css/style.css?version=1.8.9"/>
<script type="text/javascript" src="../js/jquery.min.js?version=1.7.2" ></script>

これを行う利点は次のとおりです。静的ファイルをキャッシュする場合、いつ最新のリソースをキャッシュにロードして更新するかを自由に制御できます。

3. HTML を使用してキャッシュを無効にする

HTML ではキャッシュを無効にすることもできます。つまり、ページの head タグにメタ タグを追加します。例:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>

注: キャッシュは無効にできますが、これをサポートしているのは一部のブラウザだけです。また、プロキシは HTML ドキュメントを解析しないため、プロキシ サーバーはこの方法をサポートしていません。

4. 乱数を使用する

乱数を使用してブラウザのキャッシュを回避する方法を見てみましょう

// 方法一： 
document.write( " <script src=&#39;jquery.min.js?rnd= " + Math.random() + " &#39;></s " + " cript> " )
 
// 方法二： 
var  js = document.createElement( " script " )
js.src = " jquery.min.js " + Math.random()
document.body.appendChild(js)

注: 上記の例のように、ランダムな場合数値が使用されている場合、js ファイルはキャッシュされることはなく、何も変更されない場合でも毎回サーバーからリロードする必要があります。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がブラウザーによる静的ファイルのキャッシュを回避する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。