nginx ベースのブラウザネゴシエーションキャッシュプロセスの詳細な説明

この記事は主に、nginx に基づいてブラウザネゴシエーションキャッシュを設定する詳細なプロセスを紹介します。この記事のサンプルコードは非常に詳細で、皆さんの勉強や仕事に一定の参考値があります。困っている友人はそれを参考にすることができます。

強力なキャッシュとネゴシエートされたキャッシュの違い

強力なキャッシュ: ブラウザはサーバーとネゴシエートせず、ブラウザのキャッシュに直接アクセスします。

ネゴシエートされたキャッシュ: ブラウザは、リソースをキャッシュから取得するか、再度取得するかを決定する前に、まずサーバーでリソースの有効性を確認します。

ネゴシエーションキャッシュの仕組み

ここで、次のようなビジネスシナリオがあります。バックエンドの静的リソースは随時更新され、ブラウザーはデフォルトで強力なキャッシュを使用するため、古くなったリソースはデフォルトでブラウザーキャッシュから取得されます。

ここで、ブラウザがリソースを取得するたびに、リソースが更新されたかどうかをバックエンドに確認するようにしたいので、ネゴシエートされたキャッシュを使用するようにブラウザを設定する必要があります。

では、バックエンドはリソースが更新されたかどうかをどのように判断するのでしょうか?このとき、Etag と Last-Modified の 2 つの応答ヘッダーが使用されます。

静的リソースのリクエストが受信されるたびに、バックエンドはリソースの最終変更時刻 (Last-Modified) と、リソースコンテンツに基づいて計算された Etag をフロントエンドへのレスポンスヘッダーに配置します。

応答を受信した後、フロントエンドはこれら 2 つの項目をキャッシュし、次に同じリソースが要求されたときに、これら 2 つの項目の内容を If-Modified-Since および If-None-Match 要求ヘッダーに格納します。

サーバーは、これら 2 つの項目を受信すると、それらをリソースによって現在生成されている Etag および Last-Modified と比較します。 2 つが一致する場合、リソースは更新されていないことを意味し、サーバーは 304 の空の応答を返します。一致しない場合は、リソースが更新されたことを意味し、サーバーは完全なリソースコンテンツを返します。

成し遂げる

では、このような複雑なプロセスをどのように実装するのでしょうか?実際、それは非常に簡単です。静的リソースのサーバーとして nginx を使用し、応答ヘッダーに Cache-Control: no-cache を追加するだけです。

段階的に実装してみましょう

1. 静的リソースサーバーとしてnginxを使用する

nginxの設定では、静的リソースのリクエストをリソースのディスクパスにマッピングします。

http {
  サーバー{
  聞く 80;
  ...
  場所 /画像/ {
    エイリアス D:/luozixi/tcp_test/picture/;
    # エイリアスは再定義されたパスです# たとえば、127.0.0.1/picture/1_new.gif にアクセスすると、D:/luozixi/tcp_test/picture/1_new.gif へのアクセスにマップされます
    # Web アプリケーションはリクエストを一切受信せず、画像に対するすべてのリクエストは nginx によって処理されます # エイリアスは置換、ルートは連結です autoindex on;
    # 127.0.0.1/picture/ にアクセスすると、ディレクトリ インデックス インターフェイスが表示されます}
  }
}

2. nginxの設定をリロードする

nginx -s リロード

3. この時点で、静的リソースを要求すると、nginxは自動的にEtagとLast-Modifiedをレスポンスヘッダーに追加します。

4. しかし、Cache-Contrl: no-cacheが設定されていない場合、ブラウザは次回このリソースをリクエストするときにバックエンドにリクエストを送信せず、キャッシュから直接リソースを取得することがわかりました。

5. nginxでの設定

場所 /画像/ { 
  add_header Cache-Control no-cache;
  エイリアス D:/luozixi/tcp_test/picture/; 
}

6. ブラウザキャッシュをクリアすると、最初のリクエストは通常の 200 レスポンスが返され、レスポンスヘッダーにはネゴシエートされたキャッシュが使用されていることを示す Cache-Control: no-cache がすでに含まれています。

7. リクエストを再度開始すると、リクエストヘッダーにIf-Modified-SinceとIf-None-Matchの2つの項目があることがわかります。

8. これら 2 つの項目を受け取った後、サーバー (nginx) はそれらをリソースによって現在生成された Etag および Last-Modified と比較します。 2 つが一致している場合は、リソースが更新されていないことを意味し、サーバーは 304 の空の応答を返します。一致していない場合は、リソースが更新されたことを意味し、サーバーは完全なリソースコンテンツを返します。

さらに、サーバーが If-Modified-Since を検証する方法は、単純な文字列比較だけです。リソースの Last-Modified が If-Modified-Since よりも前の場合でも、サーバーはリソースが更新されていると見なします。

9. 304 応答を受信すると、ブラウザはブラウザキャッシュからリソースを取得します。スピードがとても速いです