Layouts and Reflows Solution

[00:00:00]
>> Steve Kinney: Cool, so let's give it a shot and try it out. We're gonna hit the record button, hit double sizes a few times,
>> Steve Kinney: And you can see we've got these screenshots here. And I see these like jumps of purple.
>> Steve Kinney: If we look we can see what happens.

[00:00:17]
So we've got the click event, recalling a function, we'll take a look at it in a second. We've got this for each double width but then, the real kind of culprit is down here. When you see a bunch of stuff repeating, that's not great. And if you look, recalculate style layout, recalculate style layout, recalculate style layout, a whole bunch of times.

[00:00:40]
Like we kind of just, I did a preamble here saying layout, not great. I mean, you can see this frame took 48.7 milliseconds, which is well past the 16 milliseconds that we're aiming for, right? This was 21 frames a second, not 60. Right, so because we are recalculating style layout, recalculating style layout so much, that's usually where the big culprit here.

[00:01:07]
And then finally, we even had to do a garbage collection in the middle there. That's where the browser goes ahead and tries to reclaim some memory to get some stuff done. We can look at this, we know that we have a problem. The big question is what is our problem and what do we do about it?

[00:01:24]
So if we flip over and look at the code,
>> Steve Kinney: We can see this is a pretty like innocuous piece of code, right, like okay, like go get me the elements, make an array out of them so I can use for each cuz I'm lazy. And just double their width, right?

[00:01:45]
But it seems like we've got some kind of problem. What I could try to do is kinda change this code. So here's how I might consider refactoring it. In here, I will go ahead and I'm gonna see if I can figure out the widths of all of them first.

[00:02:03]
I'm gonna figure out all the widths first and then I'm going to update all of them. We'll see if that has any effect. Let me get rid of this double width row in a second, but let's go ahead and lets, it'll even be technically more code, right, everyone is like don't loop through stuff twice, that's a waste you know what, I don't need to be told what to do.

[00:02:22]
And we'll go ahead and we'll get the boxes, and like all the bosses, the boxes and we'll map over them and like go ahead and get me an array of all of the widths. Let's get that out of way first, so we can see, so cool give me an event of set with.

[00:02:43]
Despite how many years I've been teaching and teaching programming, I still can't type correctly when people are looking at me, and it's never gonna change so here I am. So then we'll go through all the boxes,
>> Steve Kinney: And we'll for each over them. And for each actually takes two arguments.

[00:02:59]
It'll take the thing you're iterating over and it actually takes three arguments. It'll also take the index that it's currently on. So, zero, one, two, three, four, until it gets to the end. I guess, I should tell you what the third thing is since I mentioned it takes three and it's not important.

[00:03:14]
Is the third argument is the entire array itself. So the boxes array. If anyone has questions on why does it do that, I don't know. So, we got the boxes, we go through each of them and then we'll say element dot style dot width. And we'll go ahead and we'll say go get wherever you were in the array.

[00:03:36]
Multiply that by two. And set it like that.
>> Speaker 2: Did you mean boxes down to add on line ten?
>> Steve Kinney: Yep, I was probably too busy thinking of how I was gonna make a comment that I can't type in front of people and caused that problem myself. All right, so let's go check it out.

[00:03:57]
>> Steve Kinney: We'll go ahead, we'll open up our tools, let's do another recording. I is not defined, let's go fix that.
>> Steve Kinney: Stop the recording while we do that.
>> Steve Kinney: Call it index both places.
>> Steve Kinney: Go back to the full page, yeah, stay and save.
>> Steve Kinney: All right, let's try it again now.

[00:04:32]
Go ahead and we'll record.
>> Steve Kinney: And if we take a look, we can see, let's find the place where they first double. Go, kinda zoom in there.
>> Steve Kinney: And there's a lot less happening. The whole thing happens even though I'm looping over everything twice now, the whole thing happens in about 13.2 milliseconds, right, like that's a lot less.

[00:05:05]
And you can see the most important part is I don't have all of those purple little bars, not like why is this fast? Because I did less stuff, right, I didn't do this thing repeatedly of checking layout, recalculating style, checking layout, recalculating style. The only big difference with my code is that instead of checking each one for its width and then adjusting it, I got all the widths first and then I adjusted all the widths.

[00:05:31]
All right, does anyone remember that large slide I had with all the reasons and one of them was calculating the styles, right, causes a reflow. The simple act of like, trying to figure out the size of something causes the browser to reflow the page, and so I was paying that cost by checking, updating, checking, updating.

[00:05:52]
So let's talk a little more about what's going on there.