Mastering Browser Caching: How HTTP Headers Control What You See
This article explains how browsers cache resources using HTTP headers like Expires, Cache‑Control, Last‑Modified, and ETag, describes non‑HTTP meta tag tricks, outlines which requests cannot be cached, and shows how different user actions affect cache behavior.
Non‑HTTP Cache via Meta Tag
Web developers can add a <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> tag inside the HTML <head> to instruct browsers not to cache the page, though support is limited to some browsers and not recognized by caching proxies.
How Browser Caching Works
Browsers store downloaded resources (JS, CSS, images, etc.) locally to avoid repeated requests, improving performance. Different browsers use different storage methods—for example, Firefox stores cache as a key‑value database viewable via about:cache, while Chrome keeps files in the "User Data" folder.
Cache‑Control and Expires
The server can set Expires (HTTP/1.0) and Cache‑Control with max‑age (HTTP/1.1) to define how long a resource is considered fresh. When both are present, max‑age takes precedence.
Validation with Last‑Modified / If‑Modified‑Since
When the freshness period expires, the browser can send If‑Modified‑Since with the timestamp from the previous Last‑Modified header. If the server file has not changed, it returns 304 Not Modified and the browser reads from cache; otherwise it returns 200 OK with the new content.
Validation with ETag / If‑None‑Match
Alternatively, the server provides an ETag —a unique identifier for the file. The browser later sends If‑None‑Match with that ETag. If the file is unchanged, the server replies 304; if changed, it replies 200 and a new ETag.
Requests That Cannot Be Cached
Responses containing Cache‑Control: no‑cache, Pragma: no‑cache (HTTP/1.0) or Cache‑Control: max‑age=0.
Dynamic requests that depend on cookies, authentication, or other user‑specific data.
HTTPS requests (though some browsers can cache HTTPS resources when explicitly allowed).
POST requests.
Responses lacking Last‑Modified, ETag, Cache‑Control, or Expires headers.
User Actions and Cache Behavior
Pressing F5 (normal refresh) bypasses max‑age and sends a conditional request; the server may still respond with 304 if the resource is unchanged. Ctrl+R behaves similarly. Ctrl+Shift+R (hard refresh) forces the browser to ignore all cache directives and download fresh resources.
Conclusion
Understanding the interplay of Expires , Cache‑Control , Last‑Modified , and ETag helps developers control caching effectively, avoid stale content, and improve web performance.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
21CTO
21CTO (21CTO.com) offers developers community, training, and services, making it your go‑to learning and service platform.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.