nginxのリソースキャッシュ設定の詳細な説明

nginxのリソースキャッシュ設定の詳細な説明

私はずっとキャッシュについて学びたいと思っていました。結局のところ、キャッシュはフロントエンドのパフォーマンス最適化に大きな役割を果たします。キャッシュには、必須キャッシュとネゴシエートされたキャッシュの 2 種類があります。それらの違いについての記事をたくさん読んだことがありますが、実際に使ったことはありません。意味は知っているものの、設定方法がわかりません。実践経験が不足しているため、記憶も曖昧になっています。練習は最高の教師です! nginx サーバーを使用してキャッシュを学習するプロセスを記録します。

予備調査

まず、 nginxのルートディレクトリに新しいindex.htmlファイルとindex.jsファイルを作成しました。この時点で、 nginx構成ファイルは次のようになります。

サーバー{
 8080を聴く;
 server_name ローカルホスト;
 位置 / {
  ルート /Volumes/myFile/nginx_root; 
  インデックス index.html index.htm;
 }
}

次にブラウザを開いて localhost:8080 にアクセスします。コンソールを開いて、次の 2 つのリクエストを見つけます。

最初のアクセスでは、両方のリクエストのステータス コードが 200 であることがわかります。リクエストの 1 つをクリックして、応答ヘッダー情報を確認してみましょう。

ご覧のとおり、応答ヘッダーにはEtagLast-Modified情報が含まれています。これはネゴシエーション キャッシュによって使用されるフィールドです。 nginx はデフォルトでキャッシュを使用しているようです。次に、HTML ファイルと JS ファイルを変更せずにページを再度更新して検証します。ネゴシエーション キャッシュにヒットした場合、ステータス コードとして304 Not Modified返されます。 http リクエストのステータス コードを観察するために、数回更新しました。 HTML ファイルは毎回 304 を返します。しかし、js ファイルは最初は 304 でしたが、後で200 OK (from memory cache)になりました。つまり、HTML ファイルがネゴシエーション キャッシュにヒットするたびに、JS ファイルは強力なキャッシュにヒットします (強力なキャッシュの優先度はネゴシエーション キャッシュよりも高くなります)。なぜこのようなことが起こるのでしょうか? Baidu で検索しました:

一部のキャッシュでは 200 OK (キャッシュから) と表示され、他のキャッシュでは 304 Not Modified と表示されるのはなぜですか?とても簡単です。エンティティ タグが削除されているかどうかを確認するだけです。削除された場合、常に 200 OK (キャッシュから) になります。削除しないと、2 つが交互に表示されます。

では、2 つのトリガーのタイミングの違いは何でしょうか? 200 OK (キャッシュから) は、リンクを直接クリックするか、URL を入力して Enter キーを押すことによってトリガーされます。304 Not Modified は、ページが更新されたとき、または強力なキャッシュが設定されているがエンティティ タグが削除されていない場合にトリガーされます。

私の例とは対照的に、私は次のように理解していますindex.htmlファイルはページを更新し、ネゴシエーション キャッシュにヒットして 304 を返しますが、js ファイルは index.html ファイル内でリンクされているため、強力なキャッシュ 200 OK (キャッシュから) にヒットします。私の考えを検証するために、アドレスバーを使用してindex.jsファイルに直接アクセスしました。アドレスバーに「localhost:8080/index.js」と入力します。304 が返されます。この時点でのリクエスト ヘッダーを見てみましょう。

この時点でCache-Control max-age=0 を指定し、ネゴシエートされたキャッシュの関連パラメータも伝送していることがわかります。ブラウザを更新するときに、強力なキャッシュにヒットしないようにCache-Control:max-age=0実行するようです。

nginx 強力なキャッシュを無効にする

nginxで強力なキャッシュを無効にした後に何が起こるか見てみましょう。 nginx設定ファイルを変更します。

サーバー{
 8080を聴く;
 server_name ローカルホスト;
 位置 / {
  ルート /Volumes/myFile/nginx_root; 
  インデックス index.html index.htm;
  add_header Cache-Control no-cache;
  # public は任意のオブジェクトによってキャッシュできますが、private は個々のユーザーによってのみキャッシュでき、プロキシ サーバーによってキャッシュすることはできません。add_header Cache-Control private;
 }
}

nginx設定ファイルを変更した後、 nginxサーバーを再起動します。この時点で、localhost:8080にアクセスしてください。

ご覧のとおり、この時点では HTML ファイルと JS ファイルの両方が 304 であり、両方ともネゴシエーション キャッシュにヒットしています。

キャッシュ制御:保存なし

すべてのキャッシュを無効にします (つまり、応答はキャッシュされません)。キャッシュは通常、非キャッシュ プロキシ サーバーのように動作し、クライアントに no-store 応答を転送してからオブジェクトを削除します。

キャッシュ制御: キャッシュなし

クライアントがサーバーに直接リクエストを送信するように強制します。つまり、各リクエストはサーバーに送信されなければなりません。サーバーはリクエストを受信し、リソースが変更されたかどうかを判断します。変更された場合は、新しいコンテンツを返します。変更されていない場合は、リソースが変更されていないことを示す 304 を返します。これは簡単に誤解を招き、応答がキャッシュされていないと人々に信じ込ませる可能性があります。実際、Cache-Control: no-cache はキャッシュされますが、応答データがクライアント (ブラウザ) に提供されるたびに、キャッシュはサーバーからのキャッシュされた応答の有効性を評価する必要があります。

実際、 Cache-Controlno-storeに設定すると、キャッシュされないという本当の意味になります。次に、 nginxファイルを変更し、 Cache-Controlno-storeに設定して、何が起こるかを確認します。この時点でブラウザを再度更新してください。

nginx構成ファイルを変更した後、最初の 304 を除いて (今回はブラウザが no-store 情報を受信しただけで、リクエスト ヘッダーにはキャッシュ関連の情報がまだ含まれていた)、残りの数回のページ更新ではすべて 200 が返されたことがわかります。強力なキャッシュもネゴシエーション キャッシュもヒットしません。 index.jsファイルの http ヘッダー情報を見てみましょう。

ここでは全体像を捉えていません。実際、レスポンス ヘッダーにはCache-Control: no-storeも含まれています。 Cache-Control: no-storeのサポートにより、サービスがレスポンス ヘッダーでネゴシエーション キャッシュ パラメータを返しても、ブラウザはリソースを要求するときにキャッシュ関連のパラメータを持ち込まないことがわかります。したがって、現在はキャッシュが存在せず、強力なキャッシュもネゴシエーション キャッシュもヒットしません。各 http リクエストのリソースはサーバーから返されます。

結論

この探索はこれで終わりです。実はこれは私の学習の記録にすぎません。一度練習すると、キャッシュに対する理解と認識がより明確になります。練習すれば完璧になるというのは本当です。後日、React.js や Vue.js などのフレームワークを使用してフロントエンドをパッケージ化した後、 nginxを使用してフロントエンドリソースをデプロイし、関連するキャッシュを構成する方法について記事を書く予定です。そのときに記録しておく意味があるかどうかを確認します。

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

以下もご興味があるかもしれません:
  • Nginx でバージョン番号と Web ページのキャッシュ時間を非表示にする方法
  • nginx proxy_cache バッチキャッシュクリアスクリプトの紹介
  • nginx キャッシュサーバーに静的ファイルを設定する方法
  • Nginxとブラウザキャッシュの扱い方
  • Nginx キャッシュ設定例

<<:  jQueryはフォーム検証を実装する

>>:  2 つのテーブル コピー ステートメントの詳細な説明: SELECT INTO と INSERT INTO SELECT (SQL データベースと Oracle データベースの違い)

推薦する

DPlayer.js ビデオ再生プラグインの使い方

DPlayer.jsビデオプレーヤープラグインは使いやすい主な用途: ビデオの再生、監視の開始、終了...

Zabbixを使用してMySQLを監視する方法

Zabbix 導入ドキュメントzabbix導入後zabbixエージェントの操作1. MySQLを監視...

W3C チュートリアル (7): W3C XSL アクティビティ

スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。XSL 言語は、X...

MySQL の中国語ソートの詳細と例

MySQL の漢字ソートの詳細な説明デフォルトでは、MySQL は日付、時刻、および英語の文字列の並...

Centos7でポートを開く方法

CentOS7 のデフォルトのファイアウォールは iptables ではなく、firewalle で...

Amoeba を使用して MySQL データベースの読み取り/書き込み分離を実装する方法の詳細な説明

MySQL には読み取りと書き込みを分離するアーキテクチャが多数あります。Baidu のそれらのほと...

ウェブフォームデザインのための5つの実用的なヒント

1. フォームテキスト入力のモバイル選択: テキスト入力フィールドにプロンプ​​トが追加されている場...

Linux の RPM パッケージでインストールされた xinetd ベースのサービスの管理

目次序文1. xinetdサービスに基づく起動管理(1)Telnetサービスのインストール(2)Te...

メタタグにおける http-equiv 属性の使用の概要

metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...

MySQL のインデックスにおける NULL の影響についての詳細な説明

序文私は多くのブログを読み、弊社の DBA を含む多くの人々が、MySql では列に null が含...

ReactRouterの実装

ReactRouterの実装ReactRouterはReactのコアコンポーネントです。主にReac...

HTML CSS を使用して div またはテーブルを指定した位置に固定する方法

CSSコードコンテンツをクリップボードにコピー.bottomTable{背景色: rgb (249,...

WebWorkerはJavaScriptサンドボックスの詳細をカプセル化します

目次1. シナリオ2. IJavaScriptShadowboxを実装する2.1 メインスレッドの実...

ドロップダウンメニューを実装するためのネイティブ js

ドロップダウン メニューも実生活では非常に一般的です。実装に使用される js コードは、タブ選択やア...

MYSQL 文字列強制変換メソッドの例

序文2 つのテーブル内の同じフィールドの型が異なっていたり、エンコード タイプが異なっていたりするた...