 Hey everyone, it's Sam here. On this episode of the Santa Tracker series, I'm gonna talk a little bit about performance and performance in terms of the divs and the layers that we see on the page when we look at it. So let's have a quick look at the site itself. So what we see here is a bunch of divs and layers. If you bring up the rendering tab in the bottom of your DevTools, you'll see we have paint flashing and layer borders turned on. So that's the effects you see, the brown outlines of the layers that the GPU knows about and the green is where the GPU is currently drawing. And so there's a lot of stuff going on. You know, Santa is a complicated site and we do render things as we go along. This game, for instance, is causing a few redraws and you can kind of see some of our effects don't have a drawing cost at all. For instance, this little cute scene of reindeer is down here. They don't actually need to be redrawn every frame. We've done some work to make sure that they're only happening in the GPU, which is pretty cool. But of course, for our countdown timer, we quite literally draw a new number every second, which makes sense. So what we're trying to do is reduce the number of layers that we're drawing. So if you see in the example, you'll see that the second counter is actually highlighting every frame and we don't really know why. So let's have a look at that. So this little counter here is our problem. We also got this div at the top, this little green effect up here, which is actually related and I'll explain why in just a second. So if we go to our source code and we can actually see that I've kind of commented things out rather than typing it in on the spot, we wanna change a couple of things. So firstly, this element only takes up about 70 pixels high and that's fine, right? That's how you wanna use the element, but note that it actually gets bigger around the top and bottom because we have this effect of this number appearing and disappearing as the number changes. So what we're going to do, and this is in SAS so you can see some dollar sign variables here, is we're gonna set the overflow. So that overflow is gonna be the size of the element in half. So we wanna make this element bigger by half on both sides. So what we can do is set a negative margin to make the element bigger and set a padding to make the element smaller again. What that means is that we can force the GPU to make a bigger layer, which is really good because it'll then contain our elements that move up and down as we count. We've also set a Zindex and set the overflow hidden because we can now tell the browser, hey, this layer which is now bigger really doesn't have anything outside it whereas previously our core layer actually couldn't be restricted, right? Overflow, those things did expand out of its space. So now if we hit save and hopefully refresh, it should happen automatically. We'll see that actually we've got this bigger element here but we've still got some problems here. This is still flashing for some reason we don't quite understand. What's actually happening here is this minutes and seconds and hours thing, that layer is on top of the numbers, not below the numbers. And that sounds a bit counterintuitive, right? Because surely the numbers are kind of below the text there but because they're in the wrong way, the browser thinks that it needs to redraw that text every frame which isn't quite true. So what we're gonna do is go down here and say this holder which contains our number, let's put it on top. Let's make it Zindex much higher. So this is a hundred here which is just a random value because we're in a stacking context it doesn't really matter what we choose. So if we refresh the page and that happens automatically you'll see that now that number is just ticking up on its own. So that's pretty much all I wanted to cover today. Hopefully what you've learned is a little bit about how to trick the browser into making bigger divs that are GPU layers and basically using things like Zindex to basically convince the browser to only draw the bits you care about. So thanks for watching and I'll see you next time. Thanks for watching. You can subscribe to the Google Chrome Developer Channel down here. Or check out some other great videos along here.