JavaScript Performance

Monomorphism, Polymorphism, and Megamorphism

Steve Kinney

Steve Kinney

JavaScript Performance

Check out a free preview of the full JavaScript Performance course

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

JavaScript is a dynamic language, but JavaScript keeps track of types under the hood. Functions can be optimized for the types of object's they've seen in the past.


Transcript from the "Monomorphism, Polymorphism, and Megamorphism" Lesson

>> Steve Kinney: But like they all have an a property, what's the difference, right? Clearly, if we think about what happened when we tried to delete points properties from the point class, we think about what happens when we get different objects. We can definitely measure that there is some amount of difference that happens.

And it doesn't really make any sense because why would one of these be faster than the other, if only they were slides.
>> Steve Kinney: So it turns out that there is a type system in V8. There's not in JavaScript, but there's one in V8. We had suspicions of that when we saw the strings and the numbers, our suspicions have been confirmed.

Yeah, numbers and strings, it keeps track of those, cool, but clearly there's something involving objects as well, right. And the terminology we use is the morphism of that object, right?
>> Group: [LAUGH]
>> Steve Kinney: Yeah, everyone's back, everyone's here again, cool. And so we can say that in the case that a function could be monomorphic, right.

Remember where we passed a whole bunch of objects that only had an A property, that A property was a number. Monomorphic, it's the same thing every time. There's polymorphic, which is I see many things or see a few things. Sometimes there's a B on it, sometimes there's a C, it's generally the same.

I've seen it just a subset of things, I can basically go in this case, I'm gonna optimize here. In this other case I'm gonna optimize there, I'll figure it out. And then finally there's megamorphism, which is a whole bunch of different things. I don't know what's happening, I don't know what to expect.

I'm not gonna optimize this situation, right. You can take a lucky guess on like, where you wanna be on this spectrum of, I'm highly optimized for one kinda thing, mostly optimized for a few kinds of things are not optimized, right. You can take a lucky guess on where you wanna be in that case.

This is not just for objects, like the plus operator we saw before. Behaves way differently than it would, when we always got numbers there's a lot of things. Generally speaking, the more consistent stuff is, the more speculative optimizations can be done, the faster your code is. So yeah, here's the summary again, monomorphic.

This is all I know, I've seen this type of object a million times. I'm ready, I know what to do, this is my thing. Polymorphic is basically, I've seen a few different ones, all right, it's effectively a switch statement. Okay, if it's this kinda thing, do this. If it's this other kind of thing, do the other thing, right.

And you can do a few of those, that's not free, that switch statement. And if the switch statement gets too large, it's like not worth it anymore, right. All of a sudden it's like, we've all written the code, where you can put a conditional inside a conditional, inside a conditional, inside a conditional, but eventually that becomes untenable, right.

Maybe you're all better programmers than me and haven't done that. So we know that doesn't really scale. So eventually it gives up and I've seen a lot of things. I'm not specialized in any of them, I'm just gonna do the normal thing, right. The closer we can stay to monomorphic, the better we get.

But that's neat advice, but that's not actionable, how does any of this work, right? So we'll kind of explore that a little bit. So we ask question of, how does the browser figure out the type of something is? And what we'll do is, we're gonna go back to more a few experiments.

We're gonna take a look at another one of those like special hidden functions that can basically say like, are you two the same, right? In Chrome it's called something different in each one, in one of the browsers, the shape. Chrome calls them hidden classes or maps internally. There's a whole bunch of different names but most of the engines have some concept of this, right.

It's a way of keeping track what type something is in a completely untyped language.

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