Introduction

[00:00:00]
>> All right, let's talk about JavaScript VM, which stands for virtual machine under the hood. What I wanted to really get here on is basically how do JavaScript virtual machines work? Right, there's the physical machine of a computer, the silicon, and there is the virtual machine of what JavaScript provides, and there's a big chasm between the two, and so how do exactly do we bridge this?

[00:00:21]
And the bridging of the two chasms actually has implications about performance. And so we're actually gonna talk about performance. And my hope is that if I explain to you how physical machines work, then you're gonna be able to kind of derive in your head of like, I understand now why this is slower.

[00:00:36]
This is not performing, because that'll totally make sense as to what has to happen under the hood. So this is really what I'm gonna talk about. So first little bit about me. So hi, I'm Miško Hevery. I'm a CTO at Builder IO. Builder Io does this cool, headless visual CMS system.

[00:00:51]
In the past, I created this thing called AngularJS. Angular and now I work on this thing called Qwik. Qwik is a new kind of framework that really focuses on a time to interactivity, get the applications going as fast as possible and we do this by really cleverly not doing anything.

[00:01:09]
Basically we try too hard to not download the code, not execute the code, and do nothing. So the thing we're gonna talk about today is I had all of these posts that I put on Twitter, X, I don't know what you call it these days, things that show off weird things in JavaScript.

[00:01:27]
Things like, hey, did you know that triple equals can be 15 times slower than double equals? That seems crazy, right? Did you know that, like, a plus b, but then b plus a can actually have different performance characteristics? What? That makes no sense. Why would that be? Another one, my favorite one, is that, negative x and 0 minus x can actually have, 10x slowdown in Firefox.

[00:01:54]
And so you really are starting to wonder like is JavaScript just kind of messed up? Is it just like fundamentally broken? And I think a lot of these things just make total sense once you understand what's actually happening under the hood. The other one I have over there is that JSX, could have been, how many times faster?

[00:02:12]
I forget, I think twice as fast if we could just use arrays instead of object literals for storing things. And my absolute favorite is the anamorphism which the difference between anamorphic read and a megamorphic read can be 60 times. So, you better know why these things are happening, what exactly is going on under the hood, and how to prevent these things because they can have a huge impact in terms of the performance of the code that is running.

[00:02:44]
So, what I wanna talk to you today about is kind of we're gonna start with talking about the virtual machines, what they do, how do they work? And really, it really helps to talk about the CPU first, how does the CPU work? Which is the physical machine, right?

[00:02:59]
The actual hardware that we have is the CPU and CPU runs instructions and how exactly does the CPU's work really dictate everything else. And then we're gonna talk about virtual machines, and mainly how virtual machines create things that don't exist in a physical world. So array, objects, functions, function calls, classes, prototypes, all of these things that we take for granted as part of the JavaScript virtual machine, they don't exist in physical hardware.

[00:03:31]
And so the job of the VM is to create these things, right? The job of the VM is to create the illusion that we have these higher-order concepts, they don't actually exist inside of the hardware. And once you understand the hardware and you understand how the VM creates these concepts, then many of these bizarre things in terms of performance become totally obvious.

[00:03:52]
Of course, this is why this is so much slower because this is what the VM actually has to do under the hood. And then I'm gonna show you a DeoptExplorer, which is a way of running code in in V8, in the special set of flags that collects all of this kind of internals of the framework, of the virtual machine, so not the framework the virtual machine.

[00:04:17]
And it saves it in the log file and then the DeoptExplorer is a project by Microsoft that takes this log file, which is kind of human readable, but not really, and gives you a nice GUI over it. So you can go and explore what's going on and you can actually see many of these things that are going on inside of it.

[00:04:34]
And then I'm gonna go through a couple of main things that happen in JavaScript mainly deopting, what is it, why does it happen, what are the consequences of it? Megamorphism and inline caching, which deal with properties. We're gonna talk about a little bit of a holey arrays, in other words, arrays which have holes in it.

[00:04:54]
And we're gonna leave it off with double equals and triple equals to kind of finish it off.