How I built a JS Framework that beats Vanilla JS in row selection performance

#javascript #webdev #performance #opensource

Hey everyone, I built Sigment to push JS performance to the limit and see how close a framework can get to the raw speed of the browser. After months of optimization, I finally ran the official JS Framework Benchmark, and the results blew me away.

🚀 The Result: 1.06 Weighted Geometric Mean

As you can see in the full table above, Sigment achieved a weighted geometric mean of 1.06. For context, that puts it neck-and-neck with Vanilla JS (1.03) and significantly faster than most popular frameworks.

But the real shocker was the "Select Row" test:

Vanilla JS: 2.6ms

Sigment: 2.2ms 🚀

How is Sigment faster than Vanilla JS here?

It sounds like magic, but it’s down to architecture. While a typical 'unoptimized' Vanilla implementation might use generic event delegation or manual DOM lookups, Sigment uses direct-access pointers to DOM nodes via its internal gve function. By bypassing standard reconciliation layers, it can execute specific updates even 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 createTemplate function.

Instead of re-creating 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's about proving 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 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 I’d love to get your feedback or stars!

What do you think? Is 1.06 enough for a framework? Let's hear your thoughts!

DEV Community