Browser Caching Strategy: Mermaid Flowchart

Browser Caching Strategy flowchart diagram

About Source

Browser caching strategy refers to the set of HTTP headers and browser behaviors that determine whether a resource is served from a local cache or re-fetched from the network — directly controlling load times and bandwidth usage.

When the browser requests a resource (a JS bundle, CSS file, image, API response), it first checks its HTTP cache. If a cached entry exists, the browser evaluates its freshness using the Cache-Control header set by the server. The max-age directive specifies how many seconds the cached copy is considered fresh; during this window, the browser serves the resource entirely from cache with no network request. This is why hashed asset filenames (like main.a3f7c9.js) are used with long max-age values — the hash changes when content changes, busting the cache.

Once max-age expires, the cached copy is stale. The browser sends a conditional request to the server using either the If-None-Match header (comparing against the ETag value stored with the cached response) or the If-Modified-Since header. If the server determines the resource hasn't changed, it responds with 304 Not Modified and no body — the browser uses the existing cached copy, updating its freshness timer. If the resource has changed, the server responds with 200 OK and the new content.

Cache-Control: no-cache is often misunderstood — it does not prevent caching; it requires the browser to revalidate with the server on every request (similar to a stale-then-check flow). Cache-Control: no-store actually prevents caching entirely and is appropriate for sensitive data like authentication tokens.

The stale-while-revalidate directive allows the browser to serve a stale cached copy immediately while fetching a fresh version in the background — a useful tradeoff for resources where slight staleness is acceptable but speed is important. For service-worker-controlled caching strategies that give developers finer control, see Service Worker Lifecycle and Offline First App Flow. See also Web Performance Optimization for how caching fits into a broader performance budget.

Frequently asked questions

Browser caching strategy is the combination of HTTP response headers — primarily `Cache-Control`, `ETag`, and `Last-Modified` — that govern whether the browser serves a resource from its local cache or re-fetches it from the network, directly controlling load time and bandwidth consumption.

The server sets `Cache-Control: max-age=31536000` on a response, meaning the browser considers that resource fresh for the specified number of seconds. During that window, the browser serves it from cache with zero network requests. When the timer expires, the browser sends a conditional request with `If-None-Match` or `If-Modified-Since`; a `304 Not Modified` response reuses the cached copy while updating the freshness timer.

Use `stale-while-revalidate` for resources where a slightly stale version is acceptable but speed is important — for example, non-critical API responses or secondary CSS. The browser serves the cached copy instantly for the current page load and fetches a fresh version in the background, keeping the cache current without blocking the user.

`Cache-Control: no-cache` does not prevent caching — it requires the browser to revalidate with the server on every request before serving from cache. `Cache-Control: no-store` prevents the browser from caching the response at all. Use `no-store` for sensitive data like authentication tokens or personal information; use `no-cache` when you want caching but need guaranteed freshness.

mermaid

flowchart TD
    A[Browser Requests Resource] --> B{Cached entry exists?}
    B -- No --> C[Fetch from Network — Full Response]
    C --> D[Store in Cache with Headers]
    D --> E[Serve Resource to Page]
    B -- Yes --> F{Cache-Control: no-store?}
    F -- Yes --> C
    F -- No --> G{Entry still fresh? max-age not expired}
    G -- Yes --> H[Serve from Cache — No Network Request]
    G -- No --> I{stale-while-revalidate?}
    I -- Yes --> J[Serve Stale Copy Immediately]
    J --> K[Revalidate in Background]
    K --> L{Server: resource changed?}
    I -- No --> M[Send Conditional Request with ETag or Last-Modified]
    M --> L
    L -- No --> N[Server returns 304 Not Modified]
    N --> O[Refresh Cache TTL — Use Existing Copy]
    L -- Yes --> P[Server returns 200 with New Content]
    P --> D
    style H fill:#22c55e,color:#fff
    style O fill:#22c55e,color:#fff