Mastering Chrome Developer Tools Profiling the Main Thread
This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Profiling the Main Thread" Lesson
[00:00:22] And so it's kinda cool and important to be able to see what work is going on on your website. So this is gonna be very similar. It's almost as though you took this little pyramid thing and just turned it on its side, basically. So again, the x-axis is time.
[00:00:38] And then the y-axis is just call stack. So I think one mistake is, you don't ever wanna care about a really tall one, like this one over here. See how it's really tall? Again, I'm using Shift to scroll. That doesn't matter, cuz that's just like nested functions, which are fine, that's how it works.
[00:00:56] What you wanna look out for are really fat ones. Because those are the things that take a really long time. Some of which, again, are unavoidable. So we see the biggest one is parsing HTML. So there's nothing you can do about that, right? I mean, you could have less HTML maybe.
[00:01:29] That's how that works. What you'd wanna watch out for is, you'll start seeing your own function names being really fat. Or you see update user status is taking 500 milliseconds or something like that. You're like, man, I wrote that function. Why is it taking that long? So again, the mile-high view is just looking at your widest ones and seeing what's taking so long.
[00:01:55] And then what's cool with the call stack, just kind of how you would view it is, Evaluate Script is taking a really long time. But it's not the whole script, there's something specific. And so you can go down the call stack. And the way I like to think about it is, from the fat ones, you wanna see where they'd very suddenly stopped being fat, right?
[00:02:13] So this one's huge, this one's huge, this one's huge. This one's less huge, but I think it's worth checking out. Cuz after this one, it's just like these tiny, little blocks, right? So if you've ever done anything with a profiler that's like, how long the function took and how long everything under the function took.
[00:02:34] Like cell first contained or something like that, right? It's not that the whole script took a long time to evaluate. It's specifically that this anonymous function took a long time. And then it's not just that, it's that. It's not just that, it's that. So what you're looking for is where the dropoff is.
[00:02:50] Like here, runInContext took 21 milliseconds. But then everything after it took 4, 1 ,1 ,0 ,0 ,0. So we don't really care about those little ones. We wanna see the last really wide one. That's how we're gonna kinda profile that. Does that make sense, everybody? Okay, it's a little bit confusing, but that's just kind of a rule.
[00:03:09] That's just how I look at it. I'm like, okay, I wanna drill down until there's the last wide one and then investigate it. So if we wanted to see, we parse the HTML. And then we're evaluating lodash, which is cool. This is a compiling script, we can't really do anything about that.
[00:03:25] And then the code that we could look at starts with this anonymous function and goes down eventually to this runInContext. When you click on something here, you'll start seeing information about it here, like what kind it is, right? So if you click on a purple one. Come on, Parse HTML.
[00:03:46] I guess that is it, okay. Compile Script, Evaluate Script, all that kinda stuff. So we'll see that this runInContext is a JS Frame. It took a long time. And then we can kinda click into it, if we wanted to go back into the Sources tab now, it's gonna take a second, and actually see the function.
[00:04:03] So this is the relationship you can start getting. Keep in mind, in the last little section, we talked about page audits, right? And we talked about minifying and concatenating CSS in your images and all that. Those are really big macro-optimizations, really great things that all websites should be doing.
[00:05:02] That's not necessarily a healthy attitude, because sometimes they're just really fast. It just happens to be the slowest of your really fast site. So I just wanted to point out to always keep in mind that, once you get to this screen, this is really micro-optimizations and they're really relative.
[00:05:15] So look at how long they take. If it's taking half a second to run a function, that's a problem. You wanna look into it. If it's taking, like in this case, 21 milliseconds, that's really fast. I really don't need to look at that. So yeah, just wanted to point that out.
[00:05:32] Cool, so yeah, that was starting to get used to the timeline tab. A cool feature they just added, very similar to the device emulator. Where you can see what it would look like on a mobile device. You can now do CPU throttling. So you can actually do, with the Network tab, you can throttle your network conditions to 3G.
[00:06:08] And see how long these things are really taking. Are they taking three seconds for something to run? That's a problem. Are they still kinda fast, like in the one second range? It's probably okay.