Chrome memory cache vs disk cache

Question

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.

Answer 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.

Answer 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.

Answer 3

Disk cache is RAM memory, that contains a copy of the information on the disk. Typically, when you access something on the drive, the whole page is brought into cache, on the assumption that the next access will be in that page. The first disk seek might take 8ms, while the next cache might be 100 ns.

Memory cache is the same concept, but the cache is located on the CPU chip. So the original memory access is 100ns, then cache access can be 0.5 ns.

Memory and Disk cache implementations will try to guess what you need to use next, while browser caches keep a local copy in case you need to use it again.