How Hidden Classes Improved My JavaScript Performance by 5x

#javascript #webdev #performance #node

So here's a quick story. I was working with this huge dataset — over a million records — and my code was crawling. I expected some lag, sure, but not this bad. So I decided to dig in and figure out what was going on.

The Problem: Weirdly Structured Objects

Each record in the dataset came from a different source, which meant the object structures were kind of all over the place:

const records = [
    { userId: 1, action: 'click', timestamp: 172383 },
    { action: 'scroll', userId: 2, time: 172384 },
    { id: 3, action: 'hover', timestamp: 172385 },
];

At a glance, they look fine — just slightly different. But that slight difference? It was killing performance.

What I Found: Hidden Classes in V8

After a bit of research and profiling, I realized the issue was tied to how the V8 engine (used in Chrome and Node.js) optimizes object access. It uses something called hidden classes behind the scenes.

Basically, when you create objects with the same structure — same properties, same order — V8 reuses a single hidden class, which speeds things up. But if your objects are even slightly different, V8 creates new hidden classes. That’s bad news for performance.

My Fix: Normalize Everything

I decided to standardize the shape of every object before doing anything else. Here's the approach I used:

function normalize(record) {
    return {
        userId: record.userId || record.id || null,
        action: record.action || null,
        timestamp: record.timestamp || record.time || null,
    };
}

const normalizedRecords = records.map(normalize);

Now, every object had the same keys in the same order. V8 could finally do its thing.

The Result? 5x Faster 🚀

Before normalization, the transformation and aggregation logic was taking around 2000ms. After fixing the shapes? Just 400ms. That’s a 5x speed boost from one simple change.

What You Can Take From This

JavaScript engines optimize better when object shapes are consistent.
Avoid dynamic property additions.
Always try to initialize objects with all their properties upfront and in a predictable order.

TL;DR

Hidden classes matter more than you'd think. If you're working with large datasets or doing performance-sensitive work in JS, keeping your object shapes consistent can make a huge difference.

Wrapping Up

If you’re curious about how V8 handles performance under the hood, check out this excellent deep dive: Speeding up V8.

If you found this helpful or have other performance tips to share, drop them in the comments. I'd love to hear how you tackle performance bottlenecks in your own projects.

You can also follow me on X (Twitter) or connect with me on LinkedIn — I share more dev tips, real-world learnings, and JavaScript deep dives.

Thanks for reading — and keep coding! 🚀

DEV Community