Unbounded caches

Client-side caches speed up UX — but without bounds or TTL, they become leaks in long sessions.

xychart-beta
  title "Unbounded cache heap growth"
  x-axis [t0, t1, t2, t3, t4, t5]
  y-axis "Heap MB" 0 --> 100
  line [10, 25, 40, 58, 75, 92]

Broken code

const imageCache = new Map();

async function showAvatar(url) {
  if (!imageCache.has(url)) {
    const blob = await fetch(url).then((r) => r.blob());
    imageCache.set(url, blob);
  }
  render(imageCache.get(url));
}

Every unique URL → permanent retention.

Fixed code (LRU sketch)

const MAX = 100;
const cache = new Map();

function get(key) {
  if (!cache.has(key)) return undefined;
  const val = cache.get(key);
  cache.delete(key);
  cache.set(key, val); // refresh LRU order
  return val;
}

function set(key, val) {
  if (cache.has(key)) cache.delete(key);
  cache.set(key, val);
  if (cache.size > MAX) {
    const oldest = cache.keys().next().value;
    cache.delete(oldest);
  }
}

See Bounded caches for full LRU patterns.

Live demo

Live demo: unbounded in-memory cache

Every unique key is cached forever with no eviction.

— MBPeak: — MB