Notes

TanStack Virtual

• Height is 80 px until the row mounts. Then it is measured and corrected.
• Cost is that work on every visit.

Browser cache (IndexedDB)

• Height comes from IndexedDB. This browser stores measured heights and reuses them on the next visit.
• Cost is IndexedDB reads and writes on this device, per width bucket. A cold cache writes during scroll.

Precomputed (fetched from server)

• Height comes from measurements on the server. They ship with the page. The client still re-measures and POSTs corrections to /api/heights. This demo was seeded with a headless browser. A live app would collect those heights from visits.
• Cost is 1,077 KB gzipped. Heights for all 20 widths arrive with the page. Shipping one width and fetching the rest on resize is untested here.

Precomputed + prerendered HTML

• Height comes from the same server measurements, plus prerendered HTML for the last 48 messages. The working set is 160 entries. Jump fetches HTML for that range. Placeholders keep row geometry until bodies arrive.
• Cost is 918 KB gzipped, plus fetch latency on Jump.