Check out a free preview of the full Mastering Chrome Developer Tools v2 course:
The "Page Jank Exericse" 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:

In this exercise, students smooth animation to remove "jankiness" in the animation.

Get Unlimited Access Now

Transcript from the "Page Jank Exericse" Lesson

[00:00:00]
>> 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.