Layout Thrashing Exercise

[00:00:00]
>> We have an exercise here. This one starts to get a little bit harder. So if folks are struggling with it, there's like absolutely no problem with just waiting until we go over the whole thing together. But this is like a really cool opportunity. I would just suggest to at least play around with the Performance tab and start looking at it.

[00:00:21]
So the [LAUGH] idea is it's about layout thrashing. Well, we've been talking about it's about page jank, and things like that. So you can see right now, we've got these ten little Frontend Masters logos, and they're just animating around, on the screen here. And they're really smooth, at least for my screen.

[00:00:35]
They're very smooth. And as you start adding more, and more, and more, I have a very new laptop, but, it gets to the point where they're very not smooth. I'm not sure how it's coming in, but like on my screen, they're like very jittery. And so, this is a kind of a multi part task.

[00:00:52]
I'm going to remove some sort of back down. So the first one is to make it jittery, keep adding 10 or 100 until it gets jittery. And when it's jittery, like we'll add a couple like this, we'll open up the dev tools. We'll go to performance and we'll record like just one second, let's say.

[00:01:08]
So another like tip for when you're doing the recordings is there's a lot of information to process. So the shorter that you can keep your recordings to the better. If you try to record like 10 or 15 seconds of stuff, you'll just have way too much data it'll take too long to parse, and it'll be too much to look at.

[00:01:26]
So the exercise here is to get it to the point where it's janking to do a performance recording on it. And then we'll want to one, look at all the ways that Dev Tools tells you. There's page jank, which I'm sort of kind of giving away here with like these big red bars and things like that.

[00:01:45]
So that's one, see if we can figure that out. And then the other thing is, can you figure out from just the main thread view, what function is causing the page jank? Just to look at, read through it, scroll up and down. One thing I should mention is navigating is a little bit tricky here.

[00:02:01]
So let me go back and record again. So I'll just record for one second and stop it. So we're just gonna be looking in the main thread. But navigating is really hard to do. So if you scroll like up and down, you'll see that it doesn't actually move you up and down.

[00:02:17]
It moves you like you're zooming in. I don't know if you can see these bars up here. So as what I would think would scroll me down actually zooms in and zooms out over a specific section of time. And so what you'll wanna do if you wanna actually scroll up and down, like here or something like that, you'll wanna hold Shift while you scroll, and that'll allow you to actually move up and down the call stack.

[00:02:39]
So you can see this whole thing, this is the whole second of me running. You can zoom in on a little bit. We should be able to see what type of stuff was happening here. This is on the optimized example still, but there's only ten of them. But you can see that the frames per second are high, they're looking pretty good.

[00:02:57]
You can see that there's a lot of free time, that's those slashes through, and the time that is spent it looks like it's spent between, if we go back to this summary, and drag it up. Between scripting and rendering looks like it's pretty evenly spent. So the idea here will be to do the exact same thing, but after you've hit add 100 enough times so that there's actual jank happening and take a look at how different it looks.

[00:03:18]
How you can identify that there's definitely a problem here and see if you can kind of figure out just by peeking around in this main thread, what tasks are happening when the page jank is starting to happen?