Santa Tracker Developer Diary #2: Performance & Layers

Key Takeaways

hey everyone it's Sam here on this episode of the Santa tracker series I'm going to 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 dev tools you'll see we have paint mop flashing and layer borders turned on so that's the effects you see the brown outlines are 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 drawing cost at all for instance this little cute scene of reindeers 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 were 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 of this little green effect up here which is actually related and I'll explain why in just a second Sofer 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 want to 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 want to 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 we as the number changes so what we're going to do and this is in SAS so you can see some some dollar sign variables here we're going to set the overflow so that overflow is going to be the size of the element in half so we want to 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 sort of padding to make the elements smaller again what that means is 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 said as the index 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 it would overflowed 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 I'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 an hour's 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 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 hold R which contains our number let's put it on top let's make it Z index 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 Z index 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 we'll check out some other great videos over here