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 データベースの違い)

推薦する

element-uiのアップロードコンポーネントでファイルやその他のパラメータを転送する際の問題を分析する

最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...

トップ 10 Js 画像処理ライブラリ

目次導入1. 異食症2. レナ3. コンプレッサー4. ファブリック5. ぼかす6. 画像を結合する...

W3C組織はHTML4のスタイルに関する推奨事項を提供しています

これは、W3C 組織が HTML4 に対して提示したスタイル推奨事項です。残念ながら、ブラウザが独自...

アイデアコンパイラvueインデントエラー問題シナリオの分析

プロジェクトシナリオ: Vueプロジェクトを実行したらインデントエラーが出ました。ideaコンパイラ...

最新のウェブフロントエンドフレームワーク10選を紹介(翻訳)

Web 開発の世界では、フレームワークは非常に一般的です。新しいフレームワークやテンプレートが毎日の...

CSS3はアニメーション効果を実現するためにvar()とcalc()関数を使用する。

ナレッジポイントをプレビューします。アニメーションフレーム背景グラデーションvar() と calc...

Linux で SVN サーバーをインストールする方法

1. Yumのインストール yum でサブバージョンをインストール 2. 構成1. 倉庫を作る/ho...

nginx における proxy_pass のさまざまな使用法の詳細な説明

目次プロキシ転送ルール最初のもの: 2番目のタイプ: 3番目のタイプ: 4番目のタイプ: 5番目:プ...

ウェブサイトデザインにおいて非常に重要な概念であるdiv+floatの分析

ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト ...

メタタグを簡単に説明すると

META タグは、一般的に タグと呼ばれ、HTML Web ページのソース コード内の重要な HTM...

CSS はモバイル デバイスで水平スクロール ナビゲーション バーを実装します (PC デバイスにも適用可能)

関数の起源最近、水平スクロール バーを必要とする H5 に取り組んでいました。いくつかのドキュメント...

検索テキストボックスがフォーカスを外れたときにテキストの位置がジャンプする問題の解決方法

検索テキストボックスにテキストを設定すると、フォーカスを外すと位置がジャンプしますコードをコピーコー...

CSS を使用して要素のスクロールバーを非表示にするサンプルコード

どの要素でもスクロールできるようにしながら、スクロールバーを非表示にするにはどうすればよいでしょうか...

js の parseInt() の奇妙な動作の調査と修正

背景: parseInt(0.006) または parseInt(0.0006) は 0 という値を...

背景属性の8つの属性値の詳細解説(面接の質問)

CSSの背景プロパティの値背景色背景画像背景繰り返し背景位置背景添付複合プロパティ: 背景: ba...