Mastering Chrome Developer Tools Will-Change

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Speaker 1: Back on the in the console door the animations tab?
>> John Kuperman: Yeah.
>> Speaker 1: How do you get animations to start recording or listening?
>> John Kuperman: So if you have, so basically, let me get my canary. Yeah, basically this is a new one too. It should be just by default when you go to it starting a record, but it's not recording necessarily it's listening for animation events to fire.

[00:00:28] So if you go to that. And then if you need to refresh your page, if the animation fires at the unload, but either way, just going to the tab starts the listener for it.
>> Speaker 1: And then from the previous section on the profiles panel, is it possible to exclude source patterns from the profiles panel?

[00:00:50]
>> John Kuperman: Not that I know of like black boxing. No, I don't think it is. Yeah, I don't think it is. The file find is what I always use just searching for, searching for that so. Cool. So, we did koalas. Okay the last thing, this is one of my least favorite APIs in the whole world is the will change AP- to CSS and I think it should be renamed so we'll change question mark.

[00:01:19] That's because you don't actually control anything it's like asking the browser to maybe consider passing something some work to the GPU that's basically what it does. So you're like hey, I have a fixed position thing, like that ad that we saw. Hey browser, this is fixed position and it's gonna animate or it's gonna render a lot.

[00:01:41] I'd love it if you would consider tossing this work to the GPU for me. And that's what you, you throw that request over the wall and hope that something happens. Also, if you do too many of them it just kind of chews on its own which ones it obeys and which ones it doesn't.

[00:01:56] But there's no set rule, it's all about if the browsers busier not how much GPU you have allocated, but when it works it's kind of magical. So yes, we've got this paint flashing thing and like what we did before, right, was just getting rid of stuff which obviously is not again not viable, although sometimes I wish it was.

[00:02:17] So we can do this thing where we like grab the problem areas that are junking cuz they're taking up too much CPU and we can say will change transform and voila, the GPU happens to handle it. No more paint thrashing there. So we can do the same thing.

[00:02:38] We can go to the add, if we're lucky and we grab the whole container that's got the position fixed and again we say we'll change, transform and boom, no more green, no more jank, no more rendering. I wish it was that easy all the time. It's not. Sometimes you're going to use it and it's not going to dole out the work correctly.

[00:03:01] But sometimes it's awesome.
>> Speaker 3: Having the same issue where it's not repainting like your page is working fine.
>> John Kuperman: You're not seeing any paint flashing.
>> Speaker 3: Same thing, yeah.
>> John Kuperman: The slack will repaint occasionally, but the actual page will not. Gotcha. I just did a fresh get pole and it's got the animation wrapper and everything.

[00:03:23]
>> Speaker 3: Gotcha. Yeah I'm so, this one's definitely a little bit more your mileage may vary. I'm wondering if your, if it's being tossed to the GPU automatically for you.
>> John Kuperman: I'm not sure. Yeah, cuz, I don't know. At least on my computer the fixed position stuff is it's gonna be busy painting the whole time.

[00:03:44] But yeah, I can try to take a look at it afterwards. It might just be, a lot of these are with a will change API. It does that work for you sometimes which is where we saw with the FPS meter up we saw that the GPU is doing some work.

[00:03:57] So I'm wondering if yours is being handled that way. I'm not sure.
>> Speaker 3: Is there an easy way to see what's being rendered by the GPU?
>> John Kuperman: Yeah.
>> Speaker 3: [CROSSTALK]
>> John Kuperman: What's that?
>> John Kuperman: Back in the timeline view where we were at before, when you run the recording here of the JS Profile, it'll show you in multiple columns.

[00:04:20] The busiest one is gonna be the main thread, but you can click in, let me just do a quick recording. So once the recording's done, come on, there's like no work. [LAUGH] Sorry, we'll refresh. Once the recording's done, you can see what's being handled on the main thread, which should be almost everything, then you can see what's being handed by the GPU and click into specific functionality.

[00:04:44] Again, it's going to be harder, easier with JavaScript than it is with Paints because they don't have this one to one correlation with a piece of script.
>> Speaker 3: So you won't be able to say it's this element on the page?
>> John Kuperman: So basically not in all cases. So if we kind of come up here and minimize this main, and then I can scroll down to GPU and then I can kind of start expanding this stuff.

[00:05:09] So you can kind of click in here and then you'll have to go to summary. It's not gonna be that one remission. I do know that in one of the experiments that we'll talk about of the very end, they have a whole paint tool coming out which basically fills that void where you're able to look at a block of paint and it'll actually be able to help you visualize in what area it is that's changing.

[00:05:31] It's just doesn't have like a one to one mapping with a piece of code necessarily like a lot of different things can trigger a paint. So yeah, I would definitely recommend I guess the take a take away from there is like enable that paint flashing on your sights and see if you're getting avoidable paint flashing.