HTMLページでjs、cssファイルのキャッシュを自動でクリーンアップ(バージョン番号を自動で付与)。
2022-01-25 13:30:30
Webプロジェクトの開発プロセスでは、我々はしばしば(明らかにコードを変更したが、ブラウザで変更にアクセスするために発生しませんでした)しばしばキャッシュの問題をファイルを更新した後、CSS、JSファイルを参照してください、この状況は、我々は通常、次の2つのソリューションを使用します。
1. ブラウザのキャッシュを手動でクリアする
2、バージョン番号を追加する(例:layout.css?v=1)
個人的には、ブラウザのキャッシュをクリアするとブラウザの反応を待つ必要があるので、2の方法の方が早いと思っています。ただ、バージョン番号を毎回変更するのも面倒なので、自動的に追加する方法を考える必要があります。
私のメソッド集はこちらです。
方法1:jsでhtmlにバージョン番号を自動付与する方法
<script type="text/javascript">
document.write("<link rel='stylesheet' type='text/css' href='/css/layout.css?v="+new Date().getTime()+"'>");
</script>
方法2:jspページであれば、javaコードでタイムスタンプを生成する(方法1でも可能ですが、こちらの方法の方が便利です。)
<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>" ;>
方法3:node.jsによる自動設定など、他の方法でバージョン番号を付加する方法
ps: キャッシュをクリアする目的は、ページの更新をタイムリーに確認するためです。ページをオンラインにする(つまり、これ以上変更が加えられない正式な環境に展開する)ときは、キャッシュを持つページの方がアクセスが速いので、バージョン番号を固定し、更新が必要になったときに固定したバージョン番号を入れ替えることが推奨されます。
今回は以上です。皆様の学習のお役に立てれば幸いです。そして、スクリプトハウスを応援していただければ幸いです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTMLの外部スタイルシートにCSSスタイルを導入する方法
-
html-webpack-plugin' を使用して html ページをインメモリで生成するプラグインです。
-
HTMLページのスクロールは、コンテンツの位置の一部が固定されていない場合の実装
-
ページ内のフロートとクリアの概要
-
テーブルの幅がテキストによって変化しないように設定し、固定幅にする
-
htmlフォームの「参照」ボタンをファイルアップロードに変更する方法
-
htmlからpdfへの変換は、いくつかの要約の場合(より多くの画像をお勧めします)。
-
JS、CSSスタイルリファレンス作成
-
Baiduの入力メソッドオープンAPIは、使用を移植するために自由であると主張する
-
正しいHTML、CSS、RSSフィードを検証する無料ツール