私はずっとキャッシュについて学びたいと思っていました。結局のところ、キャッシュはフロントエンドのパフォーマンス最適化に大きな役割を果たします。キャッシュには、必須キャッシュとネゴシエートされたキャッシュの 2 種類があります。それらの違いについての記事をたくさん読んだことがありますが、実際に使ったことはありません。意味は知っているものの、設定方法がわかりません。実践経験が不足しているため、記憶も曖昧になっています。練習は最高の教師です! nginx サーバーを使用してキャッシュを学習するプロセスを記録します。 予備調査 まず、 nginxのルートディレクトリに新しい サーバー{ 8080を聴く; server_name ローカルホスト; 位置 / { ルート /Volumes/myFile/nginx_root; インデックス index.html index.htm; } } 次にブラウザを開いて localhost:8080 にアクセスします。コンソールを開いて、次の 2 つのリクエストを見つけます。 最初のアクセスでは、両方のリクエストのステータス コードが 200 であることがわかります。リクエストの 1 つをクリックして、応答ヘッダー情報を確認してみましょう。 ご覧のとおり、応答ヘッダーには 一部のキャッシュでは 200 OK (キャッシュから) と表示され、他のキャッシュでは 304 Not Modified と表示されるのはなぜですか?とても簡単です。エンティティ タグが削除されているかどうかを確認するだけです。削除された場合、常に 200 OK (キャッシュから) になります。削除しないと、2 つが交互に表示されます。 では、2 つのトリガーのタイミングの違いは何でしょうか? 200 OK (キャッシュから) は、リンクを直接クリックするか、URL を入力して Enter キーを押すことによってトリガーされます。304 Not Modified は、ページが更新されたとき、または強力なキャッシュが設定されているがエンティティ タグが削除されていない場合にトリガーされます。 私の例とは対照的に、私は次のように理解しています この時点で 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-Controlをno-storeに設定すると、キャッシュされないという本当の意味になります。次に、 nginxファイルを変更し、 Cache-Controlをno-storeに設定して、何が起こるかを確認します。この時点でブラウザを再度更新してください。 nginx構成ファイルを変更した後、最初の 304 を除いて (今回はブラウザが no-store 情報を受信しただけで、リクエスト ヘッダーにはキャッシュ関連の情報がまだ含まれていた)、残りの数回のページ更新ではすべて 200 が返されたことがわかります。強力なキャッシュもネゴシエーション キャッシュもヒットしません。 ここでは全体像を捉えていません。実際、レスポンス ヘッダーにはCache-Control: no-storeも含まれています。 Cache-Control: no-storeのサポートにより、サービスがレスポンス ヘッダーでネゴシエーション キャッシュ パラメータを返しても、ブラウザはリソースを要求するときにキャッシュ関連のパラメータを持ち込まないことがわかります。したがって、現在はキャッシュが存在せず、強力なキャッシュもネゴシエーション キャッシュもヒットしません。各 http リクエストのリソースはサーバーから返されます。 結論 この探索はこれで終わりです。実はこれは私の学習の記録にすぎません。一度練習すると、キャッシュに対する理解と認識がより明確になります。練習すれば完璧になるというのは本当です。後日、React.js や Vue.js などのフレームワークを使用してフロントエンドをパッケージ化した後、 nginxを使用してフロントエンドリソースをデプロイし、関連するキャッシュを構成する方法について記事を書く予定です。そのときに記録しておく意味があるかどうかを確認します。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: 2 つのテーブル コピー ステートメントの詳細な説明: SELECT INTO と INSERT INTO SELECT (SQL データベースと Oracle データベースの違い)
DPlayer.jsビデオプレーヤープラグインは使いやすい主な用途: ビデオの再生、監視の開始、終了...
Zabbix 導入ドキュメントzabbix導入後zabbixエージェントの操作1. MySQLを監視...
スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。XSL 言語は、X...
MySQL の漢字ソートの詳細な説明デフォルトでは、MySQL は日付、時刻、および英語の文字列の並...
CentOS7 のデフォルトのファイアウォールは iptables ではなく、firewalle で...
MySQL には読み取りと書き込みを分離するアーキテクチャが多数あります。Baidu のそれらのほと...
1. フォームテキスト入力のモバイル選択: テキスト入力フィールドにプロンプトが追加されている場...
目次序文1. xinetdサービスに基づく起動管理(1)Telnetサービスのインストール(2)Te...
metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...
序文私は多くのブログを読み、弊社の DBA を含む多くの人々が、MySql では列に null が含...
ReactRouterの実装ReactRouterはReactのコアコンポーネントです。主にReac...
CSSコードコンテンツをクリップボードにコピー.bottomTable{背景色: rgb (249,...
目次1. シナリオ2. IJavaScriptShadowboxを実装する2.1 メインスレッドの実...
ドロップダウン メニューも実生活では非常に一般的です。実装に使用される js コードは、タブ選択やア...
序文2 つのテーブル内の同じフィールドの型が異なっていたり、エンコード タイプが異なっていたりするた...