Check out a free preview of the full Mastering Chrome Developer Tools v2 course:
The "Performance Panel" Lesson is part of the full, Mastering Chrome Developer Tools v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jon reviews Performance panel, which is used to analyze runtime performance, to demonstrate how to create a performance profile and read the rendering graphs.

Get Unlimited Access Now

Transcript from the "Performance Panel" Lesson

[00:00:00]
>> Speaker 1: For this next exercise, what we're gonna be looking at is, some page JANX, some performance stuff, all that. But before we get into it, just kind of wanna give a run down of how this tool works. So, this is just a little demo I made, so basically I'm generating a bunch of stuff, and you can kinda scroll through it.

[00:00:14] And I kind of wanna walk through the performance panel because it's a really scary looking panel. I think a lot of people get overwhelmed with the flame charts and all these things.
>> Speaker 1: There's just a lot going on with it. So I'm gonna open up the DevTools here, kinda make them a little bit bigger.

[00:00:28] I'm gonna hide this drawer with escape, I'm gonna go to performance. And then so kinda like what we've been seeing before with network, you can do a recording, you can refresh and start a recording. These would be if you wanna measure load performance versus when the laps already loaded performance.

[00:00:44] You can clear one, you can load them and you can save them. This is really cool because if you wanna get help on something [LAUGH] like from a DevTools expert. You're like my site's really janky and I don't know why. And they're gonna ask for one of these performance exports, that's what they wanna see, right?

[00:00:58] So you do your little performance thing, you hit export it'll save a HAR file. HAR, email that to whoever is generous enough to offer you help, which has happened to me a lot of times before. And then they'll be able to analyze it as though they were on the site, themselves.

[00:01:11] So cool, so let's start one, so what I'm gonna do is I'm just gonna hit Record, and then I'm gonna scroll around up and down, and then I'm gonna hit Stop. And remember, when we're doing CPU performance, we want to keep it small. We don't want to be doing six second of recording.

[00:01:24] We really want to keep it at a second, two at the most. So here's where things get scary, I'm gonna pop this out so we can just kinda see them like. I know there's a lot going on here. SO a few things, let's start at the very bottom, at the very bottom we kinda have this summary screen, right?

[00:01:36] And the summary is like, during that time that you took the recording, here's the kinda stuff I was doing, right? I was idling, I was doing browsery stuff, I was painting, I was rendering or executing a job script, right? So you can kind of get these colors and the colors stay true all throughout the performance page.

[00:01:52] And so, you can see that the majority of what we do as we scrolling around is rendering, right? That's this particular work flow, when you look at your own app you'll see very different things based on what its doing. But this is pretty simple, we can kinda see so let's hide it for now.

[00:02:06] We kinda know what the summary is. The next one from the bottom up, you'll see if I can grab that
>> Speaker 1: That's weird, there we go [LAUGH]. The next one that we'll see is this memory graph, right? And so what this memory is gonna be doing is it's gonna be showing us out of all the things that happened, how much memory was allocated?

[00:02:32] And then it breaks it down by color, it's like well how much of this is JavaScript memory, right? So if you've got big array or something like that, how much of it is documents? How much of it is elements like DOM nodes? And how much of it is event listeners?

[00:02:44] We're gonna get into memory in the next section. So, again, just for making things easier for now, we're gonna hide this. So we've got like two panels hidden. So now we've got something that's a little bit more manageable to deal with. I can go here and just turn off the memory view for now.

[00:02:57] So kind of what we got, I'm gonna go ahead and kinda collapse these. So, again, we're just at kind of this simple screens we've got. Basically, if you think about it, we've got two bars running. So we've got the top one, FPS CPU NET, that's one bar, and everything else that's another bar.

[00:03:11] Both of them have x axis which is time, and the times will always match up, right? So 1500 milliseconds, 1500 milliseconds. So in the top view is sort of your light view your mile high view. The green stuff is frames per second. The lower the green line is, the better, right?

[00:03:31] If you ever sight that its doing absolutely nothing, your going to see it at all the way zero. As it start using a lot like as the frames per second gets higher and higher, you're gonna see it kind of coming up to the top. And when you see a bad example, that's dropping frames, you'll start seeing a red bar across the top of those.

[00:03:49] So a red across the green is bad, higher is more, but it's just doing more work, lower is better for performance. The second thing we're gonna see is what the CPU was doing. So again, like JavaScript is single-threaded, so this is all of the rendering, all of the painting, all of the JavaScript work that's being done.

[00:04:07] So again we can kinda see just like we saw in the summary, we've got a little bit of JavaScript, those yellow spikes. Mostly we've got rendering, we've got very little bit of painting too. So we can kind of just get at, again, starting to get this high-level view.

[00:04:18] And then, the second panel is all these call graphs, right? And we can break them down in different ways. If you remember when we did the mark and measure, we added an additional one, that was user interactions got added to that. It's not there right now cuz we don't have any marks and measures.

[00:04:33] But the things we're gonna want to check out are like the network tab. So this shows over time, it's kind of like an inline view of what network files. So this is very similar to the network panel. But we're really gonna want to check out what's going on on the main thread.

[00:04:47] That's like almost always what I have here. So we'll expand the main thread and we'll see all this stuff. Again, just like we've been looking at, tall not a problem, there is a lot of stuff calling each other. Wide is what we start with look for, and its not necessarily a bit of a problem.

[00:05:00] Again, when Chrome thinks that your doing too much stuff and your dropping frames, they'll start marking these with little red boxes on them. So red boxes are always the way you can tell, I definitely have a problem, I'm dropping frames. But, if you just wanted to see like when I scroll around, it feels really slow, why is it so slow?

[00:05:16] This is the screen that we're gonna wanna start looking at. We'll go into the main thread, we'll start seeing what the widest things are, and we'll start investigating why they're so bad. Somebody asked which part is the CPU usage? That's gonna be this main. So the main is gonna be all of your CPU work.

[00:05:31] That's gonna be responsible for the laying out, the rendering, and the JavaScript stuff, so that will be color coded inside here. So while we're scrolling around on my page, if we wanna see the very longest thing looks to be this, right? These big layout blocks. So again, using this same I can zoom in with my mouse.

[00:05:47] You can go side to side with your mouse. And if you want to go up and down within the thing, you have to hold shift. One thing that's cool, another little tip, is if you click on one of these like I just clicked on that, then you can use W A S D to do it.

[00:06:00] Which is like a like a lot nicer than using your mouse. So use w to zoom in, S to zoom out and then A and D to move side to side which I find a lot nicer, but again it's all up to you. So we've got this big layout things, right?

[00:06:14] And the layout's a little bit deceptive because the layout is browser work. What we really wanna know is what triggered that layout, right? We don't want to, if you have to layout stuff, you've got to layout stuff, right? The only thing we can do there is give is less stuff moving around.

[00:06:28] So what we really wanna see is here in this yellow before the big layout. Like what did we trigger in our yellow JavaScript code before that purple layout happened? So we can kinda start drilling in here. We can see some things, like we can see, we've got some kind of timer firing, right?

[00:06:42] We could look into that. It looks like it's a set time out, somewhere in our code. We can see these like kinda big things here, these DOM garbage collections. Like something is going on That's using a lot of memory, but then the browser is able to garbage collect it.

[00:06:55] We’re gonna get into memory a lot deeper later, but it's just, something that we can note here. We just got more of these timers the set timeouts are calling these like init thing. It looks to be like the slowest stuff, I would guess that somewhere in here, like we have this timer firing, it's firing this nit thing.

[00:07:12] And something in that init is causing this layout to happen. It's like this huge recalculate style, right? So we see all these things and we see the recalculate style. So what I would do, again, finding the last wide one appears to me to be this init, right? These are all pretty wide, pretty wide, and then this one's tiny, this is append child.

[00:07:28] So I'm gonna go into the init and now we'll want to go back to our summary. Cuz when you select a box in here, it'll bring it up in the summary. And if you wanna find it, then you can just click here and go to the sources page.

[00:07:41] How are people feeling about this so far? I know this is on the heavy side of things. We can do Q&A or anything like that. We'll get a chance to kind of dive in together, but
>> Speaker 1: I know, there's like a lot going on [LAUGH]. And I know it's getting late but, okay, cool.

[00:07:57] So basically what I'm looking for is like, you ran the whole profile thing, I see that it's like a ton of purple. I see these big recalculate styles, and I wanna know what is it that's causing those, right? So I kinda go in here, and I find what we're executing in our code before that gets triggered.

[00:08:12] So I'll click here and it'll take me into the sources page. This really cool thing happens though, when you run a performance audit, it keeps track of how long every function call took. And it just puts them there for you in the left-side bar just for free, it just does that.

[00:08:26] So what's really cool about that is you can start seeing a color, coordinate them like what things are taking a really long time? So we can pretty easily see that like this init function. Which is the one that keeps calling this recalculate style is doing so, because it keeps appending children, right?

[00:08:42] Like that was what we were seeing here too. Like a timer fires, it calls a function, a function is a set time out, set time out calls it a net. A net calls unappend child. The append child generates this huge amount of recalculate style, right? So if we go into the recalculate style, this is the line that's causing it.

[00:09:01] So what we're doing here, now we can start reading the code. Now that we know like we're way to busy doing recalculate style and I know where it's coming from. We kinda look here and we see this kind of example where basically when a nig gets called, it iterates over this looped 200 times.

[00:09:15] And it keeps making these new boxes and appending them to the DOM, right? So it gets called and its 200 boxes, right? and so the problem that we have here is that we have that the original in that is defined. We need 200 boxes, so we need 200 boxes, so that's fine.

[00:09:29] But what we're getting into here is that the set timeout calls init every single time. So as that set timeout is firing, it just keeps calling init. So its basically like its kinda what we're seeing here. Again, you would see the red dots and lines if you had a paging problem which we don't here.

[00:09:46] But you can see it's like really busy on work here. And what it's doing is it's like doing these layouts. And it's doing these layouts because of the slide on the source code. So you could really trigger down to like, how busy it is, and what's making it so busy.