What is HTTP Cache? How Does It Work?

By Rahul — Google Frontend Engineer

The Caching Layers

HTTP caching operates at multiple layers: browser memory cache, browser disk cache, service worker cache, CDN/proxy cache, and server-side cache. Each layer reduces latency differently.

Memory Cache vs Disk Cache

When you see 200 (from memory cache) in DevTools, the resource was found in RAM — instant access but cleared when you close the tab. 200 (from disk cache) means it was on disk — survives browser restarts but slightly slower to read.

Freshness Model

The browser determines if a cached resource is "fresh" using headers:

Validation Model

When a cached resource is stale, the browser validates it:

The Vary Header Trap

Service Worker Cache

Best Practices

• Content-hash your static assets and cache immutably
• Always validate HTML — never set long max-age on it
• Use stale-while-revalidate for better UX on API responses
• Be careful with Vary — it can fragment your cache

Summary

HTTP caching works through freshness (max-age) and validation (ETag/Last-Modified). The browser manages memory and disk cache automatically. Service workers give you full cache control. Proper caching is the single biggest performance win for returning users.