ホームページ > 記事 > ウェブフロントエンド > フロントエンドブラウザキャッシュの使用方法

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

php中世界最好的语言オリジナル: 2017-11-27 10:05:324016ブラウズ

以前にブラウザのキャッシュについて紹介しましたが、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 サイトの他の関連記事に注目してください。