Web サイトを高速に動作させるブラウザ キャッシュ テクノロジの詳細な紹介

キャッシュ テクノロジは、Web サイト アプリケーションにおいて非常に重要です。サーバ リクエストの負荷を軽減し、ユーザーのブラウジング速度を向上させる上で不可欠な役割を果たします。昨日、誰かがブラウザ キャッシュの原理について質問し、それが私にキャッシュ テクノロジを勉強するきっかけを与えました。興味のある方のために、この記事では主にブラウザのキャッシュ原理を紹介します。

#本文:

キャッシュ テクノロジー:

キャッシュ テクノロジーを紹介する前に、まず LAMP Web サイトの価格表を見てみましょう。アーキテクチャ図から、Web サイトのキャッシュ全体を明確に理解できます。

次は LAMP キャッシュ図です:

LAMP キャッシュ図

この図から、Webサイトキャッシュは主に5つの部分に分かれていることがわかります

#サーバーキャッシュ: 主にWebリバースプロキシに基づく静的サーバーnginxとsquid、 apache2 の mod_proxy と mod_cache モジュール
ブラウザ キャッシュ: ページ HTML キャッシュと画像 JS、CSS およびその他のリソースのキャッシュを含む
PHP キャッシュ: apc eaccerlertor など、無料の PHP バッファ アクセラレーション ツールが多数あります。
メモリ キャッシュ: 主に分散キャッシュ メカニズムである memcache を使用します
データベース キャッシュ: データベース キャッシュ、データ ストレージ プロセス、接続プール テクノロジなどを構成することによって。

• ##以下はブラウザー キャッシュの原則に焦点を当てます:

私の言語表現能力は限られているので、最初に読んでみましょう。 図はより直観的で簡潔です:

上の図から、ブラウザのキャッシュは主に 2 つの部分に分かれていることがわかります。 :

ページhtmlのキャッシュ

• 画像、css、js、フラッシュなどのキャッシュ

• ブラウザ キャッシュは、ローカル コンピュータのハード ディスクにページ情報を保存することに基づいており、サーバー キャッシュは、ユーザーがアクセスしたページをサーバー上のハード ディスクに保存することに基づいています。ページ キャッシュの原理を紹介します。

ページ キャッシュのステータスは http ヘッダーによって決定されます。A ブラウザーが情報を要求し、サーバーが情報で応答します。主にプラグマが含まれます: no-cache、Cache-Control、Expires、Last-Modified、If-Modified-Since。このうち、Pragma:no-cacheはHTTP/1.0で規定されており、Cache-ControlはHTTP/1.1で規定されている。

私が描いた動作原理図:

この図から、原理は主に 3 つのステップに分かれていることがわかります:

最初のリクエスト: ブラウザは、Expires、Cache-Control、および Last-Modified/Etag を伴う HTTP ヘッダーを通じてサーバーをリクエストします。このとき、サーバーは、サーバーの Last-Modified/Etag を記録します。最初のリクエスト

• 再度リクエスト: ブラウザが再度リクエストすると、Expires、Cache-Control、If-Modified-Since/Etag を使用してサーバーにリクエストします

#サーバーは、初めて記録された Last-Modified/Etag と、再度要求された If-Modified-Since/Etag を比較して、更新する必要があるかどうかを判断し、リクエストに応答します

• #関連パラメータの説明;
• Cache-Control の主なパラメータ
  Cache-Control: private/public Public 応答はキャッシュされ、複数の間で共有されます。ユーザー。プライベート応答はプライベートにのみキャッシュでき、ユーザー間で共有することはできません。

キャッシュ コントロール: no-cache: キャッシュしません

キャッシュ コントロール: max-age=x: キャッシュ時間 (秒)

キャッシュ コントロール: -revalidate が必要です: ページの有効期限が切れている場合は、サーバーにアクセスしてページを取得します。

Expires: 表示された設定ページの有効期限

Last-Modified: リクエスト オブジェクトの最終変更時刻は、キャッシュの有効期限が切れているかどうかを判断するために使用されます。通常、これは、ファイルの時刻情報

If-Modified-Since: クライアントによって送信されたリクエストに添付された情報は、ブラウザ キャッシュ リクエスト オブジェクトの最終変更日を参照し、Last-Modified と比較するために使用されます。

Etag: ETag は Web リソースに関連付けることができる ETag です。トークンには Last-Modified の機能がほとんどありません。識別子でもあります。通常は Last-Modified と組み合わせて使用​​されます。サーバー判定の精度を高めます。

画像、CSS、JS、Flashのキャッシュについて

この技術は主にサーバー構成によって実装されます。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 構成を編集します: 次の内容を追加します

<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 Web サイトを高速に動作させるブラウザ キャッシュ テクノロジの詳細な紹介/gif "access plus 1 months"
ExpiresByType Web サイトを高速に動作させるブラウザ キャッシュ テクノロジの詳細な紹介/jpeg "access plus 1 months"
ExpiresByType Web サイトを高速に動作させるブラウザ キャッシュ テクノロジの詳細な紹介/jpg "access plus 1 months"
ExpiresByType Web サイトを高速に動作させるブラウザ キャッシュ テクノロジの詳細な紹介/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>

説明: 最初の文 -- サービスを開始します

2 番目の文 -- デフォルトの時間は 1 か月です

次は、さまざまな種類のリソースのキャッシュ時間設定についてです

推奨学習: php ビデオ チュートリアル

以上がWeb サイトを高速に動作させるブラウザ キャッシュ テクノロジの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。