ブラウザーによる静的ファイルのキャッシュを回避する方法-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2018-12-25 13:05:01

オリジナル

5724 人が閲覧しました

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

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

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

職場の多くのシナリオでは、ブラウザーのキャッシュを回避する必要があります。たとえば、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 サイトの他の関連記事を参照してください。