Check out a free preview of the full JavaScript Performance course

The "Hidden Classes" Lesson is part of the full, JavaScript Performance course featured in this preview video. Here's what you'd learn in this lesson:

Steve compares objects created in different ways to see if they have the same hidden class.

Preview
Close

Transcript from the "Hidden Classes" Lesson

[00:00:00]
>> Steve Kinney: So when we go and access a property on an object we do this thing called Dynamic Lookup. Which is, okay, I don't know if x is on this object. I don't know if it's on this prototype, right? I don't know what anything is. I've gotta figure out all this stuff.

[00:00:16]
And so the ignition goes and reads it. The ignition interpreter opens up the spec reads through everything, does all this work and tries to figure it out, right? Doing that is slow, right? And computers are good at doing repetitive work that we don't wanna do but they're also good at remembering things and not doing it.

[00:00:35]
And again you can see where this is going, not doing stuff faster than doing stuff, right? So what V8 does is it keeps a secret type system that it doesn't tell you about behind your back. So it's like, listen, you asked me for x on this object before.

[00:00:53]
I have looked it up. I've read the rules. I know where it is. It's this many bits over in memory. Fine, I'm not doing this again. Right and that's fast, it's also incredibly dangerous. All of the things that you see like giant system architectures being compromised like Spectrum.

[00:01:10]
It's like when we read memory we shouldn't read from it's if it's bad right? So if you get that wrong that could be a full crash, so you can guess that it's gonna be pretty conservative in how it does that, right? So that's why we saw cases where things went down different paths.

[00:01:27]
It was like [LAUGH] I'll do the lookup, it's fine. But things where everything was exactly the same, it was like I know about this object. I've done this. I've read the rulebook, I've seen this kind of object before. I know what to do, I will do it faster for you.

[00:01:40]
So let's actually look at some stuff. All right, so everything gets this thing called a Hidden Class. That's what it's called in Chrome, it's called something different in Firefox, it's called something different in Safari. We're going to use Hidden Class right now because why not. Because its hidden, it seems like a little cloak and dagger, who doesn't like that?

[00:01:56]
All right, so we make an object, it's got the hidden class, we'll call it C0. It's actually got some weird long name that we're not gonna use. RIght? C0 seems good for us. We add a y property to it. All right, now it's a different op, like it's got a different shape to it.

[00:02:10]
Right? It's now C1. And it went through this path. You can go from C0 to C1, right? But if we started off like it has both x and y, that's it's own different hidden class. Like we don't know. The order matters. The order in which the properties got added to the object matters when we look up what a property is.

[00:02:32]
So if the path that an object went down to get to the properties that is has is different. We can't use the cached version of the lookup. We have to go ahead and go through the process every time. So like you can only move forward in the chain, you can not, like we went from C0 to C1.

[00:02:49]
You can't start at C1. If you start at C0 and you go to C1, if you start off somewhere else, you got to go down your own path. You can only move forward in this chain. So you have C0, we have the property, becomes C1. Ignore that. Yeah, fix the next slide.

[00:03:08]
[LAUGH] If it's the same property then we go directly to C2. Right and if we delete another property then that moves to it's own versus if we deleted that same property from the above object that's a different path, right? Unless things are created the same way, they go down the same path VA doesn't try to imagine that they are the same thing.

[00:03:31]
So that's useful when we try to think about how we make our objects and what we do to our objects. If we can keep them going along the same path and we do things in a very systematic way. So when we make functions for doing things vs the functions going to run the same way every time vs here I'm gonna willy-nilly code it this way and here I'm gonna do it this other way.

[00:03:51]
You can opt yourself out of some of these things. Cool, so we saw it with some code earlier. Remember how I had that 50 million and it was a different type? That was weird, right? Let's actually talk about the process that it goes through. When an object has never been created, we've never seen that property before, where it both works for the speculative optimization as well as these hidden classes.

[00:04:21]
It's like, we don't know what x is, I've never seen it before. It's like Schroedinger's type. It's None, because we've never seen it and we have no information. The first time we see it, we either see that it's a number. Which is either a really long number, or what we call a SignedSmall, a small number, or it's a string or this thing called a BigInt.

[00:04:43]
Which is a stage two proposal for actually having large numbers that make sense in JavaScript. Just imagine that one doesn't exist for now. And so once you become either a number assigned small or string in that speculative optimization, cool. You can only move forward on this lattice. Number or oddball is basically, you know those things, you ever read those blog posts and they're like, JavaScript's messed up because true plus true equals two.

[00:05:08]
Right cuz true is technically 1 and false is technically 0, right and all that kind of stiff right. If we saw the number one and true a second time, it's a number or it's an oddball no undefined, any of these all end up being kind of same thing.

[00:05:25]
So yeah we see each of those kind of in place. But if you saw the number once and a string the second time, then we don't know what's going on. It's any. We can't, at this point, we get either closer to that polymorphism or metamorphism, right? We can't keep track of what these things are, right?

[00:05:42]
So things kind of like move through this process.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now