Chrome memory cache vs disk cache

I am interested in chrome memory cache vs disk cache? I use webpack, common chunks plugin and generate all my files with chunkhash.

How does memory differ from disk cache. When I reload my page some files are loaded from memory cache and some from disk cache (bundle.js and image.jpg from memory cache and css from disk cache). Sometimes it's different. Can we control that, choose what gets loaded from where? Memory cache seems to be faster than disk cache.

Solution 1:

Like their names said:

"Memory Cache" stores and loads resources to and from Memory (RAM). So this is much faster but it is non-persistent. Content is available until you close the Browser.

"Disk Cache" is persistent. Cached resources are stored and loaded to and from disk.

Simple Test: Open Chrome Developper Tools / Network. Reload a page multiple times. The table column "Size" will tell you that some files are loaded "from memory cache". Now close the browser, open Developper Tools / Network again and load that page again. All cached files are loaded "from disk cache" now, because your memory cache is empty.

Solution 2:

Chrome implements caches at many levels of abstraction. At the core there is HTTP (Browser) cache - a backend for other caching mechanisms. Generally caches could be divided into:

• HTTP Cache
• Service Worker Caches
• Blink cache

HTTP Cache

Every request that is made over the network is proxied by HTTP Cache adhering to RFC. When requested for the first time cache is overwritten. Resources are keyed by the origin url.

Service Worker Cache

To gracefully handle network connection failures you could use Service Workers. The caches and cache storage would be taken from disk again.

Blink Cache

Blink uses Http Cache as backend in two modes of creation - in memory and simple (filesystem). Which one is used depends on limit set globally for caches how much memory they can take. Also the current renderer cache gets the most share. What is cached are fonts, images and scripts. If global memory usage reaches some specified threshold then filesystem backend is used.

Forcing in memory cache

If you want your files to be served from memory overriding default mechanism, you can implement your own Service Worker. Using File Api, resources can be read and stored into object in memory. Then overriding fetch event would suppress network and file reads with content served from this global object.