147

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.

Castaglia
  • 2,972
  • 5
  • 28
  • 49
Igor-Vuk
  • 3,551
  • 7
  • 30
  • 65
  • 1
    Hi Igor, Has this caused loading issues with webpack? How did you solve that? – Rejoy Nov 14 '17 at 05:17
  • 1
    There were no issues. This is just a browser cache functionality that cached webpack bundle files. – Igor-Vuk Nov 14 '17 at 14:06
  • Hi Igor, I have see this to be an issue when some bundled files are loaded from disk and some from memory. It throws a JSONP error, when that happens. This happens in only rare cases. – Rejoy Nov 23 '17 at 04:07
  • [se/SuperUser](https://superuser.com/) – chharvey Mar 30 '18 at 13:20

3 Answers3

135

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.

Ruwen
  • 3,008
  • 1
  • 19
  • 16
  • 5
    Well I didn't know it is that simple. – Faizan Anwer Ali Rupani Feb 16 '18 at 10:09
  • 80
    how does the browser determine which assets to store in the Memory Cache versus Disk Cache? – chharvey Mar 30 '18 at 13:19
  • 22
    can we configure what should be cached in memory cache? – Igor-Vuk Jun 13 '18 at 22:07
  • 1
    I have some itens on my angular app that are loaded from disk when I run it locally, on production theses files are not cached at all. Only cache from memory works on production environment. Do you guys know what could cause it ? – Rafael Andrade Jun 21 '19 at 17:27
  • @RafaelAndrade Keep in mind, that angular provides multiple environments (in src/environments/*.ts). environment.prod.ts defines your productiv build environment where environment.ts defines your local development env. In local development env you mostly want no cached files so that your local changes always apply to your app. – Ruwen Jun 24 '19 at 06:05
  • If the response uses `cache-control: no-cache`, why do I still see "200 (from disk cache)" in the network tools? – Eric Burel May 04 '23 at 11:33
38

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.

Community
  • 1
  • 1
Dominik G
  • 594
  • 6
  • 8
-1

In Google Chrome, there are two main types of caching: memory cache and disk cache. These caching mechanisms work together to optimize the performance of web pages and reduce the need for repeated downloads of resources.

Memory Cache:

  • The memory cache, as the name suggests, is a cache that resides in the computer's RAM (Random Access Memory).
  • It stores copies of recently accessed web resources, such as HTML files, images, CSS, JavaScript, etc.
  • The memory cache provides faster access to resources compared to the disk cache because reading data from RAM is much quicker than reading from a hard drive or SSD.
  • Since RAM is limited, the memory cache has a smaller capacity than the disk cache.
  • The memory cache is cleared when you close the browser or when the allocated memory is needed for other processes.

Disk Cache:

  • The disk cache is a cache that resides on the computer's hard drive or SSD (Solid State Drive).
  • It serves as a secondary storage for cached resources that don't fit in the memory cache or are not currently needed in memory.
  • The disk cache has a larger capacity than the memory cache but provides slower access times because it involves reading data from the storage drive.
  • Cached resources are retained in the disk cache even when you close the browser, making them available for future visits to the same website or when you navigate back and forth between pages.

In summary, the memory cache is faster and more efficient for frequently accessed resources, and it is cleared more frequently as memory space is needed. On the other hand, the disk cache provides a larger storage capacity and retains cached resources even after the browser is closed, allowing for faster access on subsequent visits.

The combination of memory cache and disk cache allows Chrome (and other modern browsers) to deliver a smoother browsing experience by quickly serving cached resources when available, thereby reducing the amount of data that needs to be fetched over the network. This helps in improving page load times and overall performance.

Ekram Mohamed
  • 7
  • 5