Chromeメモリキャッシュとディスクキャッシュ
chromeメモリキャッシュとディスクキャッシュに興味がありますか？ webpack、一般的なチャンクプラグインを使用し、チャンクハッシュですべてのファイルを生成します。
メモリとディスクキャッシュの違いは何ですか。ページをリロードすると、一部のファイルがメモリキャッシュからロードされ、一部がディスクキャッシュからロードされます（メモリキャッシュからbundle.jsとimage.jpg、ディスクキャッシュからcss）。時々違う。それを制御し、どこから何をロードするか選択できますかメモリキャッシュはディスクキャッシュよりも高速のようです。
彼らの名前が言ったように：
「メモリキャッシュ」は、メモリ（RAM）との間でリソースを保存およびロードします。したがって、これははるかに高速ですが、永続的ではありません。ブラウザを閉じるまでコンテンツは利用可能です。
「ディスクキャッシュ」は永続的です。キャッシュされたリソースは、ディスクに保存され、ディスクからロードされます。
簡単なテスト：Chrome Developper Tools/Networkを開きます。ページを複数回再読み込みします。テーブルの列「サイズ」は、いくつかのファイルが「メモリキャッシュから」ロードされることを示します。ブラウザを閉じて、Developper Tools/Networkを再度開き、そのページを再度ロードします。メモリキャッシュが空のため、キャッシュファイルはすべて「ディスクキャッシュから」ロードされます。
Chromeは多くの抽象化レベルでキャッシュを実装しています。コアにはHTTP（ブラウザ）キャッシュがあります-他のキャッシュメカニズムのバックエンドです。通常、キャッシュは次のように分類できます。
- HTTPキャッシュ
- Service Workerキャッシュ
- 点滅キャッシュ
HTTPキャッシュ
ネットワーク経由で行われるすべてのリクエストは、 RFC に準拠するHTTPキャッシュによってプロキシされます。初めて要求されたとき、キャッシュは上書きされます。リソースは、Origin URLによってキー設定されます。
Service Worker Cache
ネットワーク接続障害を適切に処理するには、 Service Workers を使用できます。キャッシュとキャッシュストレージは再びディスクから取得されます。
点滅キャッシュ
Blinkは、メモリとシンプル（ファイルシステム）の2つの作成モードでバックエンドとしてHttpキャッシュを使用します。どちらが使用されるかは、キャッシュにどれだけのメモリを使用できるかについてグローバルに設定された制限に依存します。また、現在のレンダラーキャッシュが最も多くのシェアを取得します。キャッシュされるのは、フォント、画像、およびスクリプトです。グローバルメモリ使用量が指定されたしきい値に達すると、ファイルシステムバックエンドが使用されます。
メモリキャッシュの強制
メモリオーバーライドのデフォルトメカニズムからファイルを提供する場合は、独自のService Workerを実装できます。 File Apiを使用すると、リソースを読み取り、メモリ内のオブジェクトに保存できます。その後、フェッチイベントをオーバーライドすると、このグローバルオブジェクトから提供されるコンテンツでのネットワークおよびファイルの読み取りが抑制されます。
- CSSファイルはディスクキャッシュを使用します。
<script>はメモリキャッシュを使用します。- ブラウザを閉じて、もう一度開き、ディスクキャッシュを使用します。その後、フラッシュし、メモリキャッシュを使用します。
document.createElement('script')はディスクキャッシュを使用します。