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

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 応答を受信すると、ブラウザはブラウザ キャッシュからリソースを取得します。スピードがとても速いです

キャッシュなしとストアなしの違い

no-cache は、期限切れのリソースがキャッシュされないことを意味します。キャッシュは、サーバーからの有効な処理確認後にリソースを処理します。

また、ストアがないということは、キャッシュがないことを意味します。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Nginxとブラウザキャッシュの扱い方
  • Nginx サーバーでローカル ブラウザ キャッシュを設定する簡単な方法を説明します。
  • Nginxサーバのブラウザローカルキャッシュと仮想マシンの関連設定
  • オペレーターが知っておくべき 18 個の Nginx プロキシ キャッシュ構成のヒント (どれを知っていますか?)
  • Nginx コンテンツ キャッシュと共通パラメータ設定の詳細
  • nginx キャッシュサーバーに静的ファイルを設定する方法
  • Nginx で proxy_cache を有効にする方法
  • Nginx リバース プロキシとキャッシュおよびキャッシュのクリア方法
  • nginx キャッシュがキャッシュされない原因と解決策

<<:  Node.js mysqlクライアントが認証プロトコルをサポートしていない問題を解決する

>>:  MySQLデータベースのマスタースレーブレプリケーションの長い遅延に対する解決策

推薦する

Linux lsコマンドの使用

1. はじめにls コマンドはディレクトリの内容を表示するために使用され、Linux で頻繁に使用さ...

Vueコンポーネントの7つの通信方法についての深い理解

目次1. props/$emit導入コードサンプル2.Vスロット導入コードサンプル3.$refs/ ...

nginx を https をサポートするように設定するためのサンプル コード

1. はじめにあなたのウェブサイトはまだインターネット上に公開されたままですか?ここでは、HTTPS...

CSS コード省略 div+css レイアウト コード省略仕様

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なル...

Vue3ライフサイクル関数とメソッドの詳細な説明

1. 概要いわゆるライフサイクル機能とは、特定の条件下で自動的にトリガーされる機能です。 2. VU...

MySQL の重要なログファイルの包括的なインベントリ

目次導入ログ分類パラメータファイルエラーログファイル完全なログファイルスロークエリログバイナリログフ...

MySQL学習データベース操作DML初心者向け詳細解説

目次1. ステートメントを挿入する1.1 行を挿入する1.2 複数行を挿入する1.3 クエリステート...

Docker ベースの GitLab 環境をデプロイする方法と手順

注意:仮想マシンのメモリは2G以上が推奨され、 Alibaba Cloudのアクセラレーションイメー...

Linux での MySQL 5.6.27 インストール チュートリアル

この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...

HTML でよく使用されるエスケープ文字の概要

HTML でよく使用されるエスケープ文字をまとめると次のようになります。 &nbsp; 改行...

Nginx サービスを使用してサブドメイン環境を構築し、2D マップの読み込みパフォーマンスを向上させる方法を説明します。

1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパ...

CSS は Google マテリアル デザインのテキスト入力ボックス スタイルを実装します (推奨)

みなさんこんにちは。今日は、純粋な CSS を使用して Google マテリアル デザインのテキスト...

...

NexusはAPIを使用して操作します

Nexus は RestApi を提供していますが、一部の API はまだ Groovy と組み合わ...

React のネストされたコンポーネントの構築順序

目次Reactの公式サイトではライフサイクルの説明を見ることができます次に、ネストされたコンポーネン...