Caching & Perf Budgets — Cheat Sheet

FE Lead prep · ref 08 · keep it fast FOREVER, not fast once

The frame — two enemies of speed

1. Repeated work → CACHE. 2. Silent regression & decay → BUDGETS + no memory leaks.

Caching stack (name the layer)

Layer	Caches
Browser HTTP	assets on disk — `Cache-Control`
CDN / edge	assets + HTML/API near user — `s-maxage`
App data	server state in memory — React Query/SWR
(SW + Cache API	offline — Lesson 20)

Cache-Control directives

max-age=N — fresh N s, no network.
no-cache — store BUT revalidate each use (≠ don't cache!).
no-store — never store (sensitive).
immutable — don't even revalidate on reload.
s-maxage=N — freshness for shared (CDN) caches.
private/public — browser-only / CDN may cache.

The hashed-asset pattern (memorize)

app.a8f3c2.js  →  Cache-Control: max-age=31536000, immutable   // 1yr, hash = cache key
index.html     →  Cache-Control: no-cache                       // revalidate, pick up deploys

Hash in filename = cache key. Content changes → filename changes → fresh HTML points at new file. Aggressive caching + instant bust, zero stale-code risk.

Revalidation: ETag + If-None-Match → 304 = saves the download, still pays the RTT.
stale-while-revalidate = serve stale instantly + refresh in background → instant & eventually-fresh. Engine behind React Query/SWR.

App-level data cache (server state)

Server state ≠ UI state: shared, goes stale, many consumers → React Query / SWR.
Default wins: dedupe in-flight requests, SWR background refetch, invalidate on mutation, cached by query key ['hotel', id].
Browser HTTP cache is coarse (whole response by URL) — can't model shared mutating state.

Perf budgets & guardrails (the systemic move)

Budget	Example	Tool
Quantity	bundle ≤170KB gz, ≤10 req	`size-limit`
Milestone	LCP ≤2.5s, TBT ≤200ms	Lighthouse CI
Rule	LH Perf ≥90	Lighthouse CI

Two-sided guardrail: Pre-merge (lab): size-limit + Lighthouse CI fail the PR over budget. Post-deploy (field): RUM web-vitals p75 LCP/INP/CLS dashboard + release alerts (lab can't catch real device/network/3rd-party variance).

Memory leaks (stay fast within a session)

SPA doesn't reload between routes → per-navigation leak compounds over a long session → slow then crash.

Causes: un-removed listeners · live setInterval/timers · detached DOM still referenced · subscriptions/observers/WebSockets not torn down · unbounded global array/Map/cache.
React: almost always a missing useEffect cleanup — return a fn that removes listener/clears timer/unsubscribes.
Find: DevTools Memory → heap snapshot, exercise flow, snapshot again, compare (growing = leak). Filter "Detached" for orphaned DOM. Performance monitor = live JS-heap / DOM-node climb.

useEffect(()=>{
  const id=setInterval(poll,5000);
  window.addEventListener('resize',onResize);
  return ()=>{ clearInterval(id); window.removeEventListener('resize',onResize); }; // ← fix
},[]);

Lead one-liners (memorize)

Frame “Fast once is easy; fast across 20 teams and a long session is the job — cache repeated work, budget regressions in CI, watch real users.”

Cache “Content-hash assets, cache immutably for a year; HTML on no-cache. The hash is the cache key, so aggressive caching AND instant busting.”

Data “Server state isn't UI state — React Query with stale-while-revalidate, dedupe, background refetch; force an authoritative read at checkout.”

Budget “Regressions un-mergeable: size-limit + Lighthouse CI fail the PR; RUM p75 web-vitals catches what the lab can't, with release alerts.”

Leak “SPAs don't reload, so a per-nav leak compounds — most are a missing teardown, so every subscribing effect unsubscribes; I confirm with comparison snapshots + the detached filter.”

Sources: web.dev — HTTP cache · MDN — Caching · web.dev — SWR · TanStack Query · web.dev — perf budgets · Lighthouse CI · Chrome — memory problems

Don't fail the interview

1. no-cache ≠ don't cache — it = store + revalidate each use. no-store = never store.

2. Hashed assets → max-age=31536000, immutable; HTML → no-cache. Hash = cache key = bust-on-deploy without stale code.

3. 304 saves the download, not the round trip. immutable skips even the RTT.

4. SWR = instant-but-stale → great for browseable lists, NOT checkout price/seats (force authoritative read).

5. React Query caches server state (dedupe/SWR/invalidate-on-mutation) — HTTP cache can't model shared mutating data.

6. Guardrail = two-sided: pre-merge CI gate (fail the PR) + post-deploy RUM p75 + alerts. Lab ≠ field.

7. Long-session slowdown = memory leak (SPA doesn't reload) → missing cleanup. Confirm with comparison heap snapshots + Detached filter.

8. Caching's hard part = invalidation. Hash solves it for static assets; HTML/API/CDN still need TTLs + tag/surrogate-key purges.