キャッシュの意味

ユーザーが Nuggets などの Web サイトにアクセスすると、最初に Web サイトから写真とデータが読み込まれ、再度開かれないようにローカルにキャッシュされます。次にサーバーにアクセスしてデータを取得し、ユーザーエクスペリエンスを向上させ、最適化します。ウェブページを開く速度。

キャッシュ効果

帯域幅の消費を削減する
サーバーリクエストを減らす
ウェブサイトのパフォーマンスを向上させ、顧客エクスペリエンスを最適化します

キャッシュの場所

優先順位: Service Worker > メモリキャッシュ > ディスクキャッシュ > プッシュキャッシュ

一般に、図に示すように、コンソールのサイズからファイルキャッシュの場所がわかります。
ここに画像の説明を挿入

サービスワーカー

オフラインキャッシュでは、ページは最初に読み込まれたときに 1 回だけキャッシュされます。登録時にのみキャッシュされ、https リクエストを使用する必要があります。これにはリクエストのインターセプトが含まれるため、ファイル転送のセキュリティを確保するために https を使用する必要があります。

メモリキャッシュ

メモリキャッシュ。通常、スクリプト、画像、スタイルなど、ページでよく使用されるリソースが保存されます。読み込み速度はディスクより速いですがキャッシュ時間が短く、プロセスが終了するとキャッシュが無効になります

ディスクキャッシュ

ハードディスクキャッシュ、大容量、すべてを保存可能、広いカバレッジ、より多くのキャッシュリソース、ただし読み取り速度はメモリキャッシュより遅い

プリフェッチキャッシュ

フレームフェッチキャッシュ、リンク内でプリフェッチとしてマークされたリソース。ブラウザがアイドル状態でリロードされていることを示します。

プッシュキャッシュ

プッシュキャッシュは http/2 の知識です。上記 3 つのキャッシュのいずれもヒットしなかった場合、ここにキャッシュされます。通常、セッション (セッション) に保存され、制限時間は非常に短いです。セッションが閉じられると、キャッシュは無効になります。

CPU、ハードディスク、メモリ

多くの人と同じように、私もハードディスクとメモリの概念を混同する傾向があり、メモリとハードディスクは同じ概念であると常に考えていますが、実際はそうではありません。

CPU、ハードディスク、メモリはすべてコンピュータの重要なコンポーネントです

cpu: プロセッサとも呼ばれる中央処理装置。さまざまなコンポーネントの機能を調整し、キャッシュします。
ハードディスク: ディスク、ファイルやアプリケーションソフトウェアを保存する役割。コンピュータの電源がオフになってもデータが失われることはありません。
メモリ：ハードディスクなどのハードウェア上のデータとCPUとの間のデータ交換処理を担当します。小型、高速、電気で貯蔵、電気なしで空にできるのが特徴です。つまり、コンピュータの電源がオンになると、データが内部メモリに保存され、コンピュータの電源がオフになると、すべてのデータが自動的に消去されます。

Webキャッシュの種類

浏览器缓存、cdn缓存、数据库缓存、代理服务器缓存

CDN キャッシュ: Web リクエストを送信するとき、CDN はリクエストされたコンテンツの最短パスを計算します。リクエストを高速化するために、リクエストは通常 https://unpkg.com/vue@3などの CDN に入れられます。/dist/vue.global.js
データベースキャッシュ: データテーブル内のデータが大きすぎる場合、フロントエンドリクエストはそのデータをローカルメモリにキャッシュし、次回バックエンドデータは最初にキャッシュからクエリされます。キャッシュがない場合は、、リクエストはバックエンドに送信されます
プロキシサーバーのキャッシュ: ブラウザのキャッシュと似ていますが、プロキシサーバーは幅広いクライアントに対応するため、何度も呼び出されるファイルはキャッシュされ、ページの応答を高速化し、帯域幅リクエストを削減します。
ブラウザキャッシュ: http リクエストを行うと、Web ページの前後方向などの http データがキャッシュされ、ユーザーが以前にアクセスしたデータが保存されます。

強力なキャッシュ

一定期間、サーバーにリクエストを送信せずにキャッシュから直接データを読み取ると、ステータスコードは次のようになります。200

判断基準：ブラウザはリクエストを送信する際、まずorフィールドのresponse header有無を判断し、存在する場合は、expires(http1.0)pragmacache-control强缓存

ここに画像の説明を挿入

ネゴシエーションキャッシュ

强缓存有効期限が切れた後协商缓存(キャッシュ時間がcache-control、max-ageまたはを超えた場合no-cache)

ネゴシエーションキャッシュが有効になります: ステータスコード304
ネゴシエーションキャッシュの無効化: ステータスコード200

以下の2つの方法で実現します

最終更新日

再度リクエストする場合、最終変更時刻は(前回サーバーから返された last-modifiedrequest header )を引き継ぎ、サーバーはそれをと比較し、同じである場合は304を返し、そうでない場合は200を返します。新しいリソースファイルif-last-modifiedif-last-modifiedlast-modified

欠点:

情報が変更されていない場合でも、サーバーは変更して最終更新日を返すため、リソースが無駄になります。
last-modifiedは秒単位で測定されます。変更が 1 秒未満の場合、サーバーはそれを認識せず、304 を返します。

eタグ

一意の識別子。サーバーは毎回 1 つを返しetag、リソースファイルが変更されると新しい識別子が生成されますetag。再度リクエストする場合、(前のリクエストで返された etag ) をrequest header保持し、2 つを比較し、一致している場合は 304 を返し、一致していない場合は 200 と新しいリソースファイルを返します。if-none-match

2つの違い

last-modified は効率が高く、ファイルの内容に応じて etag のハッシュ生成を計算する必要がある
etagの方が正確です
etag の方が優先度が高い

実際の利用シーン

css、js、画像など、Webページ内の基本的に変更されていないデータはキャッシュされます。
HTML構造はキャッシュされません
Web ページのビジネスデータはキャッシュされません

フロントエンドキャッシュの知識の組み合わせ