How I built a JS Framework that beats Vanilla JS in row selection performance
Source: Dev.to
The Result: 1.06 Weighted Geometric Mean
Sigment achieved a weighted geometric mean of 1.06, putting it neck‑and‑neck with Vanilla JS (1.03) and significantly faster than most popular frameworks.
Select Row test
- Vanilla JS: 2.6 ms
- Sigment: 2.2 ms 🚀
How is Sigment faster than Vanilla JS?
The speed comes from architecture. A typical “unoptimized” Vanilla implementation might rely on generic event delegation or manual DOM lookups. Sigment, instead, uses direct‑access pointers to DOM nodes via its internal gve function, bypassing standard reconciliation layers and executing specific updates more efficiently than traditional imperative code.
The Secret Sauce: createTemplate
One of the biggest challenges in building a fast framework is balancing clean code with raw performance. Sigment achieves this through the createTemplate function.
Instead of recreating DOM nodes on every render, Sigment uses a template‑first approach: it creates a blueprint of the DOM structure once and then clones it, which is significantly faster than building nodes from scratch.
const userTemplate = createTemplate((name, role) =>
div({ class: "user-card" },
h3(name),
p(role)
)
);
// Usage is clean, declarative, and lightning fast
const view = userTemplate("John Doe", "Developer");This approach minimizes memory allocations and keeps the bridge between your logic and the browser’s pixels as short as possible.
Why this matters
Sigment isn’t just about winning benchmarks; it demonstrates that you don’t need a heavy Virtual DOM to get a modern, reactive developer experience. You get the speed of a specialized engine with the simplicity of a lightweight library.
Architecture: SPA & Islands
Whether you are building a full Single Page Application or using an Islands Architecture (HTML‑first), Sigment adapts to your needs without adding unnecessary bloat.
Check it out
The project is open‑source and welcomes feedback or stars: