Mastering Chrome Developer Tools v2 Page Jank Exericse
This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Page Jank Exericse" Lesson
>> Jon Kuperman: Kinda just a chance to get some hands-on experience with that. If we go over to Exercises we have a Page Jank exercise here with a beautiful frontend master logo. Yeah, so the thing that we're gonna wanna do here is we kinda have this concept. We've got these little M's.
[00:00:16] They're pretty smooth. They're kind of animating up and down the page until they hit the end. There was like this really cool demo I saw on somebody's Chrome team's talk once that had something like this and I couldn't find it so I recreated it for this workshop. [LAUGH] But what we start seeing is as we add more M's, they're supposed to be moving at the same speed, right?
[00:00:34] They should be really smooth still, but they're not. And the reason they're not is up for you to find out. [LAUGH] So what we'll wanna do is add 50 of those M's or add them until it gets really Janky, open up the performance tab, click start, let it run for a second, click stop, and then start looking into like what is going on, why are we having page jank, how much page jank are we having.
[00:00:54] See if you can kind of getting an idea of what is going on that. So yeah, we'll do a break for maybe 15? And then we'll come back, and we'll go over it all together. I'm just trying to get a feel for how to know what's going on with your runtime performance.