Cache Busting & Content Versioning Lab (Interactive)

Ship a bug fix under three header strategies and see which users keep executing the old bundle — and what it costs per visit. Compare static-URL long-TTL, max-age=0, and content-hashed immutable assets across deploys, visits, egress bytes, and stale-bug exposure.

Cache Busting & Immutable Asset Deployment

Deploy a bug fix and see who gets it: fingerprinted URLs invalidate themselves; static URLs bet against your users' caches.

Header Strategy

Modules changed per build3/10 × 250KBReturning visitors (warm caches)70%

Deploy version

KB per returning visit

758 KB

HTML + changed chunks

Stale visits accumulated

0.0M

users running the buggy build

CDN egress total

0.0 GB

$0.00 at $0.05/GB

Bundled assets at deploy v1 (deterministic FNV-1a digests)

/static/app.a3c305ec.js

/static/vendor.92502d63.js

/static/charts.d3e62e68.js

/static/auth.600ec012.js ← edited

/static/feed.0307e484.js ← edited

/static/search.ca0ee588.js ← edited

/static/settings.83509108.js

/static/admin.e8542954.js

/static/theme.b08bea4a.js

/static/i18n.5da931b9.js

A content-hash change creates a new URL, so no invalidation command is needed: HTML (no-cache) references the new chunk, browsers keep the year-long-cached old chunks untouched. Zero stale bugs, ~99% asset cache hits for returning users.

How It Works Under the Hood

Mutable URLs plus long max-age are a deployment trap: a critical app.js fix can hide inside 30-day browser and proxy caches while max-age=0 burns megabytes and round trips per visit. Build tools resolve it by embedding a SHA-256 (here deterministic FNV-1a) content digest in the filename, letting chunks ship with Cache-Control: public, max-age=31536000, immutable — while index.html is served no-cache so its updated script tag fetches the new digest instantly. Deploys then require zero CDN invalidation: old files simply stop being referenced. The same topic’s family of cache pathologies — penetration, breakdown, avalanche — is countered by Bloom filters, mutexes, and TTL jitter.

Core Architectural Principles

Content-hashed filenames make immutability safe: one changed byte yields one new URL and fresh cache space.
HTML entry point must be no-cache; assets get max-age=31536000, immutable — the golden header pair.
TTL jitter (base + random(0,300)) prevents mass synchronized expiration avalanches hammering the origin.

Interview Round Script

For any frontend or CDN question, state the golden rule immediately: hashed assets with max-age=31536000 immutable, HTML with no-cache, zero invalidation commands at deploy. Then broaden: distinguish cache penetration (Bloom-filter or cache NULLs), breakdown (mutex/XFetch), and avalanche (jittered TTLs) to demonstrate the full pathology map this topic draws.

Key Trade-Offs

Infinite cacheability with instant correctness requires an automated build pipeline and a grace period keeping old hashed assets alive.

Related Curriculum Chapter