Check out a free preview of the full JavaScript Performance course
The "Deleting, Feeding Objects Solution" Lesson is part of the full, JavaScript Performance course featured in this preview video. Here's what you'd learn in this lesson:
Steve walks through the Solution to Deleting, Feeding Objects Exercise.
Transcript from the "Deleting, Feeding Objects Solution" Lesson
[00:00:00]
>> Steve Kinney: All right, cool, so let's take a look, what do we find? Do we have any first noticings from running some of the tests?
>> Steve Kinney: Anything we noticed, we can do some of it together. We saw that when we deleted point x, it was way slower than deleting point y.
[00:00:20]
It was kinda hard to triangulate whyy, cuz why is one of these slower than the other, right? But when we do it with three, we can kinda like figure out, one of this is not like the other, and figure out which of the three is the oddball. Is deleting x, the first one, the oddball, or is deleting y, the second one, the oddball?
[00:00:44]
But we don't know, but when we have three, you can figure out who's wrong. So let's go ahead, let's try it out, let me go ahead. I have Point (2, 4, 6), I've got my constructor. Let me go ahead and save it and run it.
>> Steve Kinney: All right, so deleting x was definitely still slow, that hasn't changed.
[00:01:14]
>> Steve Kinney: Deleting y was fast before, it's now slow.
>> Steve Kinney: Deleting z,
>> Steve Kinney: Is, again, fast again,right? So before, when we only had x and y,
>> Steve Kinney: x was slow, y was about the same as everything else. When we added z, z was fast and the other two were slow.
[00:01:45]
Are we ready to make a hypothesis yet? Which is it, that x was slow, or that y was suspiciously fast when we first looked at it, and now z is? Right, seems to me that if we delete the last one, we're okay. If we delete any of the first or second ones, we all of sudden have gotten a lot slower, is that fair?
[00:02:08]
Right, interesting, right, it shouldn't really matter. It actually, just fun historical fact, it used to be, never delete anything because deleting any of the properties would have slowed the object down. Right, and that was true, before Turbofan, there was Crankshaft, and Crankshaft would get slower if you deleted any of the properties.
[00:02:28]
Turbofan is slightly smart enough to know if you delete the last one, which a lot of times is the one you're deleting, it's optimized for that case. But deleting properties is slow, which is like, who cares? JavaScript's a dynamic language, right, it shouldn't really matter. We have some amount of insight to know that strings and numbers definitely made a difference.
[00:02:48]
We saw Turbofan be able to mark something for optimization, and then have to deoptimize it, right? So it's almost like there's a type system in place. I don't see a type system, right, I'm not writing flow or reason ML or typescript. But I'm definitely feeling some of the effects of this.
[00:03:06]
But an object that could have all these different properties on it is different than something that's a string or a number. Right, so I'm sensing this from doing some of the science, but I don't totally know what's happening yet. Let me do another little experiment, and we're gonna take a bunch of objects.
[00:03:28]
We're gonna go back to addition a little bit, cuz who doesn't like some good old fashioned addition? We'll go ahead, we'll take a bunch of objects. We'll say const objects, and I'm just gonna make a bunch of the same objects. I'll say a is 1, a is 2, a is 3, a is 4, so these are very similar looking objects.
[00:03:55]
Right, they all have an a property, that a property is always a number. Right, hopefully you're making some assumptions about what's gonna happen here. Right, it's like, similar things good, different things bad. Right, so take that and we'll go ahead and say, let sum = 0. We'll get one of the objects.
[00:04:31]
>> Steve Kinney: This will effectively just, iterations move through it. It'll effectively end up being 0, 1, 2, 3, which'll be the indices. So we're just gonna rotate through the objects with this.
>> Steve Kinney: And we'll say sum equals sum plus,
>> Steve Kinney: The a property of that object. Right, so go through, for however many times, right, we're gonna go through the objects.
[00:04:57]
We're gonna add the a property, we're gonna add the a property, we're gonna add the a property, over and over and over again. Let's see what we get.
>> Steve Kinney: All right, took about nine milliseconds, I feel confident we can go back up to 1E7.
>> Steve Kinney: All right, 26, right, clearly scaling pretty well here, okay, not bad.
[00:05:21]
Let's go ahead, we're gonna keep an a property on all of them, cuz this code would theoretically, I don't even know what happens if we lose. I guess undefined gets coerced into NAN, nobody wants to go down that road. So we'll keep an a property on all of them.
[00:05:33]
But maybe sometimes we added some stuff to an object, sometimes we deleted some stuff from an object, things happen in JavaScript. Right, our code's a wild, wild place, things are changing all the time. We've got back different data from the database, and some of them have these properties, some of them don't.
[00:05:49]
So we'll go ahead and say, give this one a b property.
>> Steve Kinney: Here we'll say,
>> Steve Kinney: Let's make them different.
>> Steve Kinney: All right, we'll run this code again.
>> Steve Kinney: All right, that's, again, a few milliseconds, but that's definitely a noticeable difference, that's 20% longer, right?
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops