The Speed of Chrome: How V8's Hidden Classes Revolutionize JavaScript Performance (2009)

The Speed of Chrome: How V8's Hidden Classes Revolutionize JavaScript Performance

In the latter half of 2009, the web development community is still reeling from the speed of Google Chrome. We've spent a decade treating JavaScript as a necessary evil that’s 100x slower than C++. But the V8 engine has shattered that assumption. By compiling JavaScript directly to machine code at runtime (JIT), V8 is pushing the language into the realm of 'real' systems programming.

One of the most impressive feats in V8's design is how it handles the dynamic nature of JavaScript objects. Unlike C++ or Java, JavaScript is classless and objects can gain or lose properties on the fly. Normally, this requires a slow dictionary lookup in memory. V8 bypasses this with Hidden Classes.

How Hidden Classes Work

When you create a new object in JavaScript, V8 creates a hidden class behind the scenes. Every time you add a new property, V8 transitions the object to a new hidden class.

function Point(x, y) {
    this.x = x;
    this.y = y;
}

var p1 = new Point(1, 2);
var p2 = new Point(10, 20);

1. When new Point() is called, a hidden class (let's call it C0) is created with no properties.
2. this.x = x transitions the object to a new hidden class C1 that includes the property x at a specific memory offset.
3. this.y = y transitions it to C2 with x and y.

Because both p1 and p2 follow the same path, they both end up sharing the same hidden class C2. This allows V8 to access properties at fixed memory offsets, just like a compiled C++ class, instead of doing a name-based lookup.

Avoiding the Performance Trap

As developers in 2009, we must now write 'optimizable' JavaScript. The biggest performance killer is changing the order in which properties are assigned.

// Good: Objects share the same hidden class
var p1 = { x: 1, y: 2 };
var p2 = { x: 10, y: 20 };

// Bad: Objects now have DIFFERENT hidden classes!
var p3 = { x: 1, y: 2 };
var p4 = { y: 20, x: 10 }; // Different order

Because the transition path is different, p3 and p4 will not share a hidden class. V8 will be forced to use a more generic (and slower) approach to handle them. Always initialize your properties in the constructor, and always in the same order.

De-optimization and Inline Caching

V8 also uses Inline Caching (IC). It records the hidden class of the objects passed to a function. If you call the same function multiple times with the same object type, V8 replaces the generic lookup code with a direct access to the memory offset.

If you suddenly pass an object with a different hidden class, V8 has to "de-optimize" the function, falling back to slower, safer code. This is why "monomorphic" code (code that always uses the same types) is significantly faster in 2009 than "polymorphic" code.

JavaScript is finally growing up. We're seeing it power complex applications like Gmail and Google Wave that were previously thought impossible in a browser. V8's hidden classes are the foundation of this new era.

Aunimeda builds modern web frontends - from single-page applications to complex multi-locale sites.

Contact us to discuss your frontend project. See also: Web Development, Corporate Website Development