この記事は主に、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 応答を受信すると、ブラウザはブラウザ キャッシュからリソースを取得します。スピードがとても速いです キャッシュなしとストアなしの違い no-cache は、期限切れのリソースがキャッシュされないことを意味します。キャッシュは、サーバーからの有効な処理確認後にリソースを処理します。 また、ストアがないということは、キャッシュがないことを意味します。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Node.js mysqlクライアントが認証プロトコルをサポートしていない問題を解決する
>>: MySQLデータベースのマスタースレーブレプリケーションの長い遅延に対する解決策
1. はじめにls コマンドはディレクトリの内容を表示するために使用され、Linux で頻繁に使用さ...
目次1. props/$emit導入コードサンプル2.Vスロット導入コードサンプル3.$refs/ ...
1. はじめにあなたのウェブサイトはまだインターネット上に公開されたままですか?ここでは、HTTPS...
略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なル...
1. 概要いわゆるライフサイクル機能とは、特定の条件下で自動的にトリガーされる機能です。 2. VU...
目次導入ログ分類パラメータファイルエラーログファイル完全なログファイルスロークエリログバイナリログフ...
目次1. ステートメントを挿入する1.1 行を挿入する1.2 複数行を挿入する1.3 クエリステート...
注意:仮想マシンのメモリは2G以上が推奨され、 Alibaba Cloudのアクセラレーションイメー...
この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...
HTML でよく使用されるエスケープ文字をまとめると次のようになります。 改行...
1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパ...
みなさんこんにちは。今日は、純粋な CSS を使用して Google マテリアル デザインのテキスト...
Nexus は RestApi を提供していますが、一部の API はまだ Groovy と組み合わ...
目次Reactの公式サイトではライフサイクルの説明を見ることができます次に、ネストされたコンポーネン...