Browser cache: cache or server?

A page with several objects visited more than once. For each object and each visit, the browser decides: serve it from the cache, revalidate it with a conditional GET, or download it again. Follow the decision tree and the messages it produces.

Page

The first object is the HTML page; the rest are the objects it references. The server sets the freshness of each one with Cache-Control.

max-age in seconds. no-cache: stored but always revalidated. no-store and “none”: never stored.

Visits

Each visit happens t seconds after the previous one. Tick the objects that changed on the server in between.

Examples

Practice

Generates a random page and visits and hides the decisions: for each object of the chosen visit, say what the browser does and what the server answers.

View

Export

Decision tree

Messages of this visit

Cache before and after the visit

Model assumptions
  • Every 200 OK response carries Last-Modified and its explicit freshness: Cache-Control: max-age=N (fresh for N seconds from the moment it was received), no-cache (stored, but always revalidated) or no-store (not stored). A response without freshness information is not stored either.
  • An object that is not in the cache is requested with a normal GET and answered with 200 OK.
  • A fresh copy (age < max-age) is served from the cache without any message.
  • A stale copy (age ≥ max-age, or no-cache) is revalidated with a conditional GET: If-Modified-Since equal to the Last-Modified of the copy. The server answers 304 Not Modified without a body if the object has not changed (the copy becomes fresh again for another max-age), or 200 OK with the new object if it has.
  • The page is one more object: if it is fresh or revalidated with 304, the browser knows the embedded objects from the cached copy. Within a visit the page is handled first and then the objects in order, over a persistent connection without pipelining.
  • Last-Modified is shown symbolically as “L·version”; each change on the server increases the version. Visits are instantaneous: the model says which messages are sent, not how long they take. Out of scope: ETag, heuristic freshness, proxies.

About this visualization

A browser cache simulator for a web page with its HTML base file and several objects, visited several times. The server sets the freshness of each object with Cache-Control (max-age=N, no-cache, no-store or no information) and every 200 response carries Last-Modified. On each visit, t seconds after the previous one and with some objects changed on the server, the browser decides object by object following the decision tree: if it is not cached, normal GET and 200 OK; if it is cached and fresh (age below max-age), it is served from the cache without any message; if it is cached but stale (or no-cache), conditional GET with If-Modified-Since, answered with 304 Not Modified without a body if it has not changed or 200 OK with the new object if it has. The visualization shows the path followed in the tree, the browser–server sequence diagram of the visit, the cache table before and after (version, age, freshness, decision) and a summary of messages and downloaded bytes. The student edits the page and the visits, plays the decision step by step, uses prepared examples, practises with random exercises and exports the diagram as SVG or PNG.

Concepts: web caching, browser cache, freshness, Cache-Control, max-age, no-cache, no-store, conditional GET, If-Modified-Since, Last-Modified, 304 Not Modified, revalidation.

Formulas:

Network Architecture I, Session 2.3 · Enrique de la Hoz, University of Alcalá · License CC BY-SA 4.0 · Source and catalogue on GitHub · DOI 10.5281/zenodo.23285664