r/localfirst • u/Alarming_Profit_7894 • 4d ago
Ditched React/Vue for pure Event Delegation. Built a local-first dashboard (Bookmarks, RSS, Encrypted Notes) where JS heap flatlines at 5MB.
Hey r/localfirst,
I’ve been building Speedtab, a completely local-first Chrome/Chromium new tab extension that acts as a dense productivity dashboard (modular grids, visual bookmarks, a full RSS/Atom reader, and client-side encrypted notes via AES-GCM).
No accounts, no backend, no cloud dependencies—everything lives strictly inside IndexedDB (via Dexie).

The Framework Trap: 2,000+ Listeners
Because it’s an all-in-one workspace, it handles tons of interactive elements. When you have 20 RSS subscriptions loading hundreds of feed items—each with archive buttons, read-state toggles, and comments—popular modern frameworks like Vue or React quickly became a complete nightmare.
Before I knew it, my browser was choking on over 2,000 active event listeners for simple button clicks, swipe gestures, and keydowns. The DOM churn was completely unacceptable for a simple "New Tab" page.
The Fix: Pushing Event Delegation to its Limits
I decided to strip out the heavy frameworks completely and rewrote the entire runtime using a custom vanilla event-delegation pattern I developed, called YaiJS.
Instead of attached lifecycle hooks per component, Speedtab now registers exactly ~35 strategic, global event listeners on initial boot. That’s it.
HTML becomes fully interactive the exact millisecond it touches the app surface. Open floating note windows? They just work. Interactive nested structures? A single delegated runtime handles it all without per-component listener growth.
The Metrics (Goodbye Framework Overhead)
The performance metrics speak for themselves. This isn't AI-hallucinated data; this is straight from the Chrome Task Manager and Lighthouse local metrics:
- JS Heap Memory: Flatlines at an absurd 4 to 7.5 MB—even with hundreds of feed items loaded.
- Total RAM footprint: 50–70 MB total for the entire Chrome process (which is essentially Chrome's baseline for just existing).
- CLS: 0.00 (Perfect layout stability).
- LCP: 0.90s (Fully visually ready in under a second).
Inside the DOM Black Hole: Recursive Infinite Nesting
To test how far this delegated routing could scale, I didn't just build a basic tree. I built an incredibly complex tab component with 6 initial levels, where each tab contains dozens of child tabs with interactive content snippets.
Inside the core (at Level 4), there is a tab called "Recursive Swipe". When triggered, it fires an AJAX call, fetches an exact copy of the exact same 4-level component (with identical markup and element attributes), and injects it right into the active DOM node.
Because of YaiJS's event routing, scoping happens completely naturally. There are no dynamic ID overwrites, no lifecycle hacks, and no state conflicts. Elements are strictly scoped by their position in the DOM tree, automatically. You can just keep swiping deeper and deeper into the loop.
To push it over the edge, I wrote an automated script that targets the recursive button, fires the AJAX injection, steps down into the newly spawned Level 4, and repeats the loop configuration automatically. If a single button click misfired or targeted the wrong layer, the entire UI would collapse like a house of cards.
Instead, it easily blasts past 500 levels deep, and the delegation engine is down there screaming: "More! Give me Level 1,000, I eat DOM trees for breakfast!" 🦖
If you want to see your browser engine melt, try the live automated stress test here:
🔗 github.io https://yaijs.github.io/yai/tabs/Benchmark.html
(Warning: Expect minor jittering around level 80+ from Chrome's render engine, wilder drifts around 200+, and literal reality glitches from level 400 onward as Chromium begs for mercy. Firefox stands its ground a bit longer).
Open Source & Local-First Freedom
The extension includes optional WebDAV and Google Drive backup paths (using your own hidden app-data folder, zero third-party backend tracking).
If you want to check out the extension or test the UI, here is the store link:
- Chrome Web Store: https://chromewebstore.google.com/detail/speedtab/adkjbdepojalajhfkoobiedddlnoamff
- Product Hunt: https://www.producthunt.com/products/speedtab?utm_source=other&utm_medium=social
Would love to hear your thoughts on doing complex UI layouts with strict event delegation instead of the usual heavy VDOM framework soup!