Painting

[00:00:00]
>> Steve: All right, we've laid out the page, hopefully we're not thrashing the DOM anymore. We need to actually get to the final two pieces, which is both painting the layers, and figuring out profiling of all of this, and seeing if we have some problems here.
>> Steve: So anytime you change something other than opacity or a CSS transform, you're gonna trigger a paint, right?

[00:00:25]
And that's kind of interesting, so it seems like there are thing that can change without having to redraw things. Just let that one wash over you for a second. I will explain it in a second, but just struggle with it for a moment. Of trying to think about how it is that you can change the opacity or move stuff around without having to repaint it.

[00:00:42]
That doesn't feel right, does it, it's still true, I'm not lying to you, but it's definitely somewhat counterintuitive. All right, we do a paint, we tell the browser, the browser tells every element on the page to draw a picture of itself. [LAUGH] It's just kind of funny as I think about it, draw a picture of yourself and hand it to me.

[00:01:00]
[LAUGH] And then it takes those and it puts together the page. Cool, it has all this information, everything knows this geometry cuz we've done the layout. We know what all the styles are, it has all the information it needs to do this. And I said before, triggering a layout will always trigger a paint, because now there's different pixels to paint.

[00:01:20]
Cool, but if you're just changing colors like, hey, I'm just changing the background color, you don't necessarily need to trigger a layout. So you can have, every layout is gonna cause a paint, but not every paint had a layout before it. Right, if you're changing colors, that's just repainting.

[00:01:35]
If you're changing sizes, that's layout and painting. So what we wanna do is figure out if we're painting unnecessarily. Again, it's that rule, paint as much as you need to and as little as you can get away with it. Luckily, Chrome has some really great tools to see if we're painting, so let's go take a look at that.

[00:01:52]
>> Steve: So over in an example called Stuck On Top, I have the classic stuck header and footer at the bottom, right? And I can actually go ahead, and if you don't rendering next to the console, these three little dots here are your buds. Where you go to More Tools > Rendering, and then you should have it down here.

[00:02:15]
If not, either in the chat or here, if anyone has a problem with that, we'll handle it in the next break. So we can turn on paint flashing, and this highlights areas of the page when they're being repainted in green. And you can see as I scroll around that I am repainting the header and footer every time.

[00:02:36]
If you are doing that and you don't see that, there is a reason. We'll get into a little bit, but it turns out that if you have a retina screen, that's not happening for you right now. If you have a non-retina screen, it is, right, that's why I'm in this non-retina device mode.

[00:02:51]
We'll look at other examples that work just as poorly on retina and non-retina, but this is kind of a very simple example to look at. And I don't know, at my job, everyone else except for me has one of those 27-inch thunderbolt displays. So on a phone, retina's good to go, we're in front of our laptops, but a lot of times when we're plugged into a monitor, it's not retina.

[00:03:09]
At least in my world, I have a 4k display, so I don't know what's going on. Cool, all right, so we can see that we're repainting. We don't wanna repaint more than we need to. And the question is, what can we do about this?
>> Steve: So again, to kinda repeat myself, we paint as much as we need to, but as little as we can get away with.

[00:03:34]
And I feel like I was painting more than I needed to, to not show all that much. So before we can solve this problem, we're missing a conceptual piece in what's going on. I said, hey, we lay everything out, we calculate the styles, do all that, tell everything to paint itself, send it to the GPU.

[00:03:51]
Like, anytime someone says something like, yeah, just send it to the GPU and they get really hand wavy, you should treat them with suspicion. And you should be treating me with suspicion at this point because I didn't explain what that even means, right.