A dive into browser caches

What happens when browser requests a static resource?

When the browser requests a static resource such as a font, JS, CSS, or image, it first checks whether it has a cached copy of the resource.

If the resource is not cached, the browser makes a network request to the server to fetch the resource. The server responds with the resource and includes response headers such as cache-control and expires headers. These headers tell the browser how long it can cache the resource.

If the cache-control or expires headers are set to allow caching, the browser stores a copy of the resource in its cache, along with the headers that indicate how long it can be cached.

The next time the browser requests the same resource, it first checks its cache to see if it has a cached copy that is still valid based on the cache-control or expires headers. If the cached copy is still valid, the browser uses it instead of making another network request.

What are the these caches and why are there so many?

If you inspect network in chrome dev tools, in size column you’d see terms like “memory cache”, “disk cache”, “service worker”, etc.

There are several types of browser caches that are used to store and retrieve frequently used resources.

Let’s understand what are these.

• Memory cache: A cache that stores resources in memory. It is the first cache that the browser looks up when it needs to retrieve a resource. It is fast, but the data stored in memory cache is volatile and can be lost if the browser is closed or the computer is turned off.

• Disk cache: A cache that stores resources on disk. It is the second cache that the browser looks up when it needs to retrieve a resource. Data stored in disk cache persists even after the browser is closed or the computer is turned off.

• HTTP cache: A cache that stores resources in the browser’s HTTP cache, which is managed by the HTTP protocol. It allows the server to specify caching instructions that dictate how long the resource should be cached, and whether it can be cached in memory or on disk.

• Service Worker cache: A cache that stores resources in the browser’s Service Worker, which is a script that runs in the background and intercepts network requests. It allows the website to provide offline functionality and improve performance by serving cached resources directly from the browser.

• Prefetch cache: Caches resources that have been specified in the prefetch HTML tag, allowing the browser to load them in the background before they are needed.

• DNS cache: Caches domain name lookups, allowing the browser to quickly resolve the IP address of frequently visited websites.

Additonally, you’d have heard of “Blink cache”. Blink Cache is an implementation of the HTTP cache used by the Blink rendering engine, which powers the Google Chrome and Opera browsers. It is a memory cache that stores resources such as images, JavaScript, and CSS files in RAM, making it faster to access than disk-based caches.

Cache Lookup Order

• This diagram illustrates the order in which the browser looks up different caches when trying to retrieve a resource

    ┌───────────────────────────────────────────────┐
    │                Network / Server               │
    └───────────────────────────────────────────────┘
                             ▲
                             │
             ┌───────────────┼─────────────────┐
             │               │                 │
   Memory Cache       Service Worker     HTTP Cache
             │               │                 │
             ▼               ▼                 ▼
 ┌────────────────┐ ┌────────────────┐ ┌────────────────┐
 │    Response    │ │    Response    │ │    Response    │
 │ from Memory    │ │ from Service   │ │ from HTTP Cache│
 │     Cache      │ │ Worker Cache   │ │                │
 └────────────────┘ └────────────────┘ └────────────────┘
                             │
                             ▼
               ┌───────────────────────────┐
               │          Update           │
               │ Service Worker or Network │
               └───────────────────────────┘

The order of lookup is as follows:

1. Memory Cache
2. Service Worker Cache
3. HTTP Cache (also known as the Browser Cache)
4. Network/Server

If a resource is found in one of the caches, the corresponding response is returned immediately. If not, the next cache in the lookup order is checked until the resource is found or all caches have been exhausted. Finally, if the resource is not found in any of the caches, a request is made to the network/server to retrieve the resource.

Understanding these different types of browser caches and how they work can help you optimize your website for faster load times and better performance.

Hope you found this useful, thanks for giving it a read.