ホームページ >ウェブフロントエンド >jsチュートリアル >HTTP キャッシュ: 知っておくべきことすべて
HTTP キャッシュは、サーバーの負荷を軽減し、クライアントの応答を高速化し、ネットワーク帯域幅を節約することにより、Web ページのパフォーマンスを向上させるテクノロジーです。 HTTP キャッシュは主に、強制キャッシュ と ネゴシエート キャッシュ の 2 つのタイプに分類されます。
強制キャッシュを使用すると、クライアントはサーバーにリクエストを送信せずに、指定された期間内でローカルにキャッシュされたリソースを直接使用できます。強制キャッシュは、主に Cache-Control と Expires の 2 つのフィールドを通じて、サーバーによって指定された応答ヘッダーによって制御されます。
Cache-Control は、リソースの最大有効期間 (max-age)、キャッシュを共有できるかどうか (パブリックまたはプライベート)、および変更が許可されるかどうか (no-age) を指定する一般的なヘッダーです。キャッシュまたは -store なし)。
例:
<code>Cache-Control: max-age=3600</code>
上記は、リソースが 3600 秒間有効であり、キャッシュできることを意味します。
Expires は、キャッシュの絶対有効期限を指定する非推奨のフィールドです。
例:
<code>Expires: Wed, 23 Aug 2024 03:36:26 GMT</code>
これは、リソースが 2024 年 8 月 23 日の午前 3:36:26 に期限切れになることを意味します。
Cache-Control と Expires の両方が存在する場合は、Cache-Control が優先されます。
キャッシュのネゴシエーションでは、クライアントはリクエストごとにサーバー リソースが更新されたかどうかを確認する必要があります。更新されない場合、サーバーは 304 ステータス コードと空の応答本文を返し、クライアントはローカル キャッシュを使用し続けることができます。更新されると、サーバーはステータス コード 200 と新しいリソースを返し、ローカル キャッシュを置き換えます。キャッシュのネゴシエーションには、サーバーとクライアントのヘッダー、主に Last-Modified/If-Modified-Since と ETag/If-None-Match が関係します。
Last-Modified は、リソースの最終変更時刻を示すサーバー側のフィールドです。例:
<code>Last-Modified: Tue, 22 Aug 2024 02:36:26 GMT</code>
これは、リソースが最後に変更されたのが 2024 年 8 月 22 日の午前 2:36:26 であることを意味します。
If-Modified-Since は、リソースが最後に取得された時間を示すクライアント側のフィールドです。例:
<code>If-Modified-Since: Tue, 22 Aug 2024 02:36:26 GMT</code>
これは、クライアントが 2024 年 8 月 22 日の午前 2 時 36 分 26 秒にリソースを取得したことを意味します。
2 つのタイムスタンプが等しい場合、または Last-Modified の方が早い場合、リソースは更新されません。 Last-Modified が後の場合、リソースは更新されています。
ETag は、リソースの一意の識別子を表すサーバー側のフィールドです。例:
<code>ETag: '5d3a9f6d-1f86'</code>
これは、リソースの識別子が「5d3a9f6d-1f86」であることを意味します。
If-None-Match は、リソースの予期される識別子を示すクライアント側のフィールドです。例:
<code>If-None-Match: '5d3a9f6d-1f86'</code>
これは、クライアントが「5d3a9f6d-1f86」というリソース識別子を期待していることを意味します。
2 つの値が一致する場合、リソースは更新されません。それらが異なる場合、リソースは更新されています。
ネゴシエートされたキャッシュと強制キャッシュを組み合わせると、ユーザーが常に最新のコンテンツを利用できるようにしながら、不要なネットワーク要求を効果的に削減できます。
強制キャッシュ: 静的リソース (CSS、JS、画像など) の場合、キャッシュ期間を長く設定します。これにより、ブラウザはサーバーに接続せずにローカル ストレージからリソースを直接取得できるようになります。
ネゴシエーション キャッシュ: 変更される可能性のあるリソースについては、ネゴシエーション キャッシュを使用します。ブラウザは、リソースが変更されたかどうかを確認するリクエストを送信します。そうでない場合、サーバーは 304 Not Modified 応答を返し、ブラウザがローカル キャッシュを使用できるようにします。リソースが変更された場合、サーバーは 200 OK と更新されたリソースを返します。
Express.js をバックエンド フレームワークとして使用するとします。
<code>Cache-Control: max-age=3600</code>
Leapcell は、Web ホスティング、非同期タスク、Redis 用の新世代サーバーレス プラットフォームです:
多言語サポート
無制限のプロジェクトを無料でデプロイ
比類のない費用対効果
簡素化された開発者エクスペリエンス
簡単な拡張性と高いパフォーマンス
詳しくはドキュメントをご覧ください。
X でフォローしてください: @LeapcellHQ
ブログを読む
以上がHTTP キャッシュ: 知っておくべきことすべての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。