Chromeメモリキャッシュとディスクキャッシュ

Chromeメモリキャッシュとディスクキャッシュに興味がありますか？私は一般的なチャンクプラグインであるwebpackを使用して、すべてのファイルをチャンクハッシュで生成します。

メモリとディスクキャッシュの違いは何ですか。ページをリロードすると、一部のファイルがメモリキャッシュから読み込まれ、一部のファイルがディスクキャッシュから読み込まれます（bundle.jsとimage.jpgがメモリキャッシュから、cssがディスクキャッシュから）。時々それは異なります。それを制御して、どこから何をロードするかを選択できますか？メモリキャッシュはディスクキャッシュよりも高速のようです。

彼らの名前が言ったように：

「メモリキャッシュ」は、メモリ（RAM）との間でリソースを格納およびロードします。したがって、これははるかに高速ですが、非永続的です。ブラウザを閉じるまでコンテンツを利用できます。

「ディスクキャッシュ」は永続的です。キャッシュされたリソースは、ディスクに格納され、ディスクからロードされます。

簡単なテスト：Chromeデベロッパーツール/ネットワークを開きます。ページを複数回再読み込みします。表の列「サイズ」は、一部のファイルが「メモリキャッシュから」読み込まれていることを示しています。ブラウザを閉じて、Developer Tools / Networkを再度開き、そのページを再度読み込みます。メモリキャッシュが空であるため、すべてのキャッシュファイルが「ディスクキャッシュから」読み込まれます。

Chromeは抽象化の多くのレベルでキャッシュを実装します。コアには、他のキャッシングメカニズムのバックエンドであるHTTP（ブラウザ）キャッシュがあります。通常、キャッシュは次のように分類できます。

• HTTPキャッシュ
• サービスワーカーキャッシュ
• 点滅キャッシュ

HTTPキャッシュ

ネットワークを介して行われるすべての要求は、RFCに準拠したHTTPキャッシュによってプロキシされます。初めて要求されたとき、キャッシュは上書きされます。リソースは、元のURLによってキー付けされます。

サービスワーカーキャッシュ

ネットワーク接続の失敗を適切に処理するには、Service Workersを使用できます。キャッシュとキャッシュストレージはディスクから再度取得されます。

キャッシュを点滅

Blinkは、メモリとシンプル（ファイルシステム）の2つの作成モードでHttp Cacheをバックエンドとして使用します。どちらを使用するかは、キャッシュにグローバルに設定された制限によって、どれだけのメモリを使用できるかによって異なります。また、現在のレンダラーキャッシュが最大のシェアを獲得します。キャッシュされるのは、フォント、画像、スクリプトです。グローバルメモリの使用量が指定されたしきい値に達すると、ファイルシステムバックエンドが使用されます。

メモリキャッシュの強制

デフォルトのメカニズムをオーバーライドするメモリからファイルを提供したい場合は、独自のService Workerを実装できます。File Apiを使用して、リソースを読み取り、メモリ内のオブジェクトに保存できます。次に、フェッチイベントをオーバーライドすると、このグローバルオブジェクトから提供されるコンテンツを含むネットワークとファイルの読み取りが抑制されます。