フロントエンド インターフェイスで js および css ファイルのキャッシュを自動的にクリアする方法

Web プロジェクトの開発プロセスでは、CSS や JS ファイルを参照することがよくありますが、ファイルの更新後にキャッシュの問題が発生することがよくあります (コードは明らかに変更されていますが、ブラウザーでアクセスすると変更がありません)。次の 2 つの解決策を使用します:

1. ブラウザーのキャッシュを手動でクリアします

2. バージョン番号を追加します (layout.css?v=1 など)

個人的には、待機する必要があるため、方法 2 の方が速いと思います。ブラウザでブラウザのキャッシュ応答をクリアします。しかし、毎回バージョン番号を変更するのは面倒なので、バージョン番号を自動的に追加する方法を見つける必要があります

私が集めた方法は次のとおりです:

方法 1: HTML にバージョン番号を自動的に追加できます。 jsを通して

<script type="text/javascript"> 
document.write("<link rel=&#39;stylesheet&#39; type=&#39;text/css&#39; href=&#39;/css/layout.css?v="+new Date().getTime()+"&#39;>");  
</script>

方法2: JSPページの場合、Javaコードを使用してタイムスタンプを生成できます(JSPページの場合、方法1を使用することもできますが、この方法の方が便利です)

<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>">

方法3:バージョン番号を追加するには、node.js 自動設定などの他の方法を使用してください。

ps: キャッシュをクリアする目的は、ページをオンラインにしたときにページの更新を確認することです。 、正式な環境にデプロイされ、それ以上の変更は行われません)、キャッシュされたページへのアクセスが高速になるため、バージョン番号を固定し、更新する必要がある場合は固定バージョン番号を変更することをお勧めします。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連読書:

H5の画像のズレを解決する方法

html5のページ構造で注意すべき点は何なのか

localStorageとsessionStorageの使い方

以上がフロントエンド インターフェイスで js および css ファイルのキャッシュを自動的にクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。