M2: A Compute-Intensive Web App

// v1: parse with a CSV library into objects, match in a loop, set state. correct; wrong thread
async function onUpload(bank: File, ledger: File) {
  setStatus('matching…')                                   // never paints: the loop below is in the same task
  const a = parseCsv(await bank.text()), b = parseCsv(await ledger.text())   // 500k objects each: ~600 MB as objects
  const byKey = new Map(b.map(r => [r.amount + '|' + r.date, r]))
  const pairs = [], rest = []
  for (const r of a) { const m = byKey.get(r.amount + '|' + r.date); m ? pairs.push([r, m]) : rest.push(r) }   // 500k × ~16 µs = 8 s
  for (const r of rest) { const m = bestFuzzy(r, b) ; … }   // n × m edit distances: hours
  setResult({ pairs, rest })
}

// v2: the matching job in a worker, columnar data transferred in, indices transferred out, cooperative cancellation
// main thread
const worker = new Worker(new URL('./match.worker.ts', import.meta.url), { type: 'module' })
function runMatch(cols: Columns, onProgress: (p: number) => void, signal: AbortSignal) {
  return new Promise<MatchResult>((resolve, reject) => {
    const id = crypto.randomUUID()
    worker.onmessage = ({ data }) => {
      if (data.id !== id) return
      if (data.progress != null) onProgress(data.progress)
      else if (data.done) resolve({ a: data.a, b: data.b })          // Uint32Array indices, transferred back
      else if (data.cancelled) reject(new DOMException('cancelled', 'AbortError'))
    }
    signal.addEventListener('abort', () => worker.postMessage({ id, cancel: true }))
    worker.postMessage({ id, cols }, [cols.amount.buffer, cols.date.buffer, cols.refOff.buffer, cols.pool.buffer])   // transfer: O(1); cols is now detached here
  })
}
// worker
let cancelled = new Set<string>()
self.onmessage = ({ data }) => {
  if (data.cancel) { cancelled.add(data.id); return }
  const { id, cols } = data; const n = cols.amount.length; const a: number[] = [], b: number[] = []
  const index = buildHashIndex(cols)                      // amount+date → candidate rows: O(n)
  let lastPost = 0
  for (let r = 0; r < n; r++) {
    if ((r & 0x3fff) === 0) {                             // every 16k rows (~1 ms): check the flag, maybe post progress
      if (cancelled.has(id)) { cancelled.delete(id); self.postMessage({ id, cancelled: true }); return }
      const now = performance.now(); if (now - lastPost > 100) { self.postMessage({ id, progress: r / n }); lastPost = now }
    }
    const m = index.find(cols, r); if (m >= 0) { a.push(r); b.push(m) }
  }
  const A = Uint32Array.from(a), B = Uint32Array.from(b)
  self.postMessage({ id, done: true, a: A, b: B }, [A.buffer, B.buffer])
}

// v5: memory as a budget. the tab has ~1-2 GB on a laptop, ~300 MB on a phone; a worker's heap counts against it
// 1. know the working set per job before accepting it
const bytesPerRow = 20 /* columns */ + 24 /* avg ref string */
function admit(job: Job) {
  const need = job.rows * bytesPerRow * 2             // input + index
  if (used + need > budget) return queueUntilFree(job) // or: reject with "file too large for this device; use the server path"
  used += need; return start(job)
}
// 2. the budget is per device, not a constant: navigator.deviceMemory (GB, coarse), performance.memory (Chrome only), and the honest fallback: a probe
const budget = (navigator.deviceMemory ?? 4) >= 8 ? 600e6 : 200e6
// 3. release: a finished job's buffers are dropped (worker-side: set to null; main-side: never held). a pool worker that has grown keeps its heap;
//    recycle a worker after N jobs or when its reported heap (performance.memory in the worker) exceeds a line
// 4. the server path: past the device budget (a 5M-line file on a phone) the same job runs server-side with the same progress UI; the client decides by arithmetic, not by trying and dying
// 5. the test: run 20 jobs back to back in CI (Playwright + CDP Memory.getHeapUsage) and assert heap after GC is within 10% of the first run: the JS course part 5