フロントエンドブラウザキャッシュの使用方法

以前にブラウザのキャッシュについて紹介しましたが、HTML のオフライン キャッシュについても紹介しましたが、あまり話しすぎると混乱しやすいので、今日はこれらのキャッシュの違いとキャッシュの使用方法について説明します。

200 メモリキャッシュからはサーバーにアクセスせず、直接キャッシュを読み取り、メモリからキャッシュを読み取ります。このときのデータはメモリ上にキャッシュされ、プロセスが終了すると、つまりブラウザを閉じるとデータは存在しなくなります。ただし、この方法では、サーバーにアクセスせずに、ディスク キャッシュから派生リソース

200 をキャッシュすることしかできません。また、プロセスが強制終了された場合でも、データはまだ存在します。このメソッドは派生リソースのみをキャッシュできます。

304 Not Modified はサーバーにアクセスし、サーバーがこの ステータス コード を返します。次に、キャッシュからデータを読み取ります。

第 3 レベルのキャッシュの原理

まずメモリを確認し、メモリがある場合は直接ロードします

メモリがない場合は、ハード ディスクを選択して取得します。ハードディスクがない場合は、ネットワーク リクエストを実行します

ロードします。次のように、リソースがハードディスクとメモリにキャッシュされます

写真

にアクセスします。

ブラウザを終了します。 -> 200 (ディスク キャッシュから) -> 200 (メモリ キャッシュから)

アプリケーション キャッシュは、上記のキャッシュとは少し異なります。インターネットに接続していなくても、ハードディスクから読み込むことができます。インターネットに接続していなくても閲覧できます。

ブラウザのキャッシュを設定します

304 キャッシュをネゴシエートするか、一度サーバーと通信する必要がありますか? サーバー通信を遮断したい場合は、ブラウザにローカル キャッシュの使用を強制する必要があります (キャッシュ制御/期限切れ)。

一般に、それを設定するにはいくつかの方法があります: ブラウザキャッシュ。

1. HTTP METAによる有効期限とキャッシュ制御の設定

<meta http-equiv="Cache-Control" content="max-age=7200" />
 <meta http-equiv="Expires" content="Sun Oct 15 2017 20:39:53 GMT+0800 (CST)" />

このように書くと、Webページに対してのみ有効で、Webページ内の画像やその他のリクエストには無効です。

2. Apache サーバー構成の画像、CSS、JS、フラッシュ キャッシュ

このテクノロジーは主にサーバー構成を通じて実装されます。Apache サーバーを使用する場合は、mod_expires モジュールを使用して実装できます。

mod_expires モジュールをコンパイルします。

Cd  /root/httpd-2.2.3/modules/metadata/usr/local/apache/bin/apxs -i -a -c mod_expires.c //编译

まず httpd.conf ファイルを開き、expires モジュールを検索して、このモジュールが有効であることを示す左側の # 記号を削除し、Apache サーバーを再起動します

httpd.conf 設定を編集します。 : 次のコンテンツ

<IfModule mod_expires.c>ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
EXpiresByType application/x-shockwave-flash "access plus 1 months"
EXpiresByType application/x-javascript      "access plus 1 months"
#ExpiresByType video/x-flv "access plus 1 months"</IfModule>

3、php などを追加します。

<?php
  header("Cache-Control: public");
  header("Pragma: cache");
  $offset = 30*60*60*24; // cache 1 month
  $ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT";
  header($ExpStr);?>

または

$seconds_to_cache = 3600;$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";header("Expires: $ts"); header("Pragma: cache");header("Cache-Control: max-age=$seconds_to_cache");

キャッシュされたフロントエンド コードのデプロイメント

質問 1: キャッシュを使用して、フロントエンド コードを更新するにはどうすればよいですか?

以下に示すように、リソース ファイルまたは画像の後にバージョン番号を追加できます。

質問 2: しかし、すべてのファイルにバージョン番号を追加した後、変更したのは 1 つのファイルだけで、他のファイルのキャッシュは無駄ではありませんか?

この問題を解決するには、データ

summary

アルゴリズムを使用してファイルの概要情報を見つけることができます。この概要情報はファイルの内容と 1 対 1 に対応しています。以下に示すように:

これで問題は解決します。

質問 3: また新たな問題が発生しました。ファイルを公開するときはどうすればよいですか?

1. 最初にページをデプロイし、次にリソースをデプロイします。2 つのデプロイメントの間の時間間隔中に、ユーザーがページにアクセスすると、古いリソースが新しいページ構造にロードされ、古いバージョンのリソースがロードされます。キャッシュ後の結果は、ユーザーが不規則なスタイルでページにアクセスし、手動で更新しない限り、ページはリソース キャッシュが期限切れになるまでエラーを実行し続けます。

2. 最初にリソースをデプロイし、次にページをデプロイします。デプロイ時間間隔内で、古いバージョンのリソースのローカル キャッシュを持つユーザーが Web サイトにアクセスします。要求されたページは古いバージョンであるため、リソース

reference

は変更されていません。ブラウザはローカル キャッシュを直接使用します。この場合、ページは正常に表示されますが、ローカル キャッシュを持たないユーザーまたはキャッシュの有効期限が切れたユーザーが Web サイトにアクセスすると、古いバージョンのページが新しいバージョンのリソースをロードし、ページ実行エラーが発生します。 , ページがデプロイされると、この部分が表示されます。ユーザーが再度ページにアクセスすると、通常の状態に戻ります。

さて、上記の分析から言いたいことは、誰も最初にデプロイすることはできないということです。これにより、展開プロセス中にページが混乱する可能性があります。したがって、トラフィックが少ないプロジェクトの場合、研究開発の学生は、夜中にこっそりオンラインにアクセスして、最初に

静的

リソースをロードしてからページをデプロイすることで、問題が少なくなるように見えます。

これらの問題を解決するにはどうすればよいですか?

この問題は、公開されたリソースをカバーするためにリリースされるリソースを使用することを伴う、リソースのオーバーレイ リリースに起因します。これを解決するのは簡単です。つまり、非カバレッジ パブリッシングを実装することです。

キャッシュに関しては非常に多くの側面があります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

HTML でデジタル フォーカス チャートのカルーセル コードを実装する方法

HTML のテキストの最後の行が不完全に表示される場合の対処方法

キャンバスを使用してパーティクルファウンテンアニメーション効果を作成する方法

以上がフロントエンドブラウザキャッシュの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。