will-change

[00:00:00]
>> Steve Kinney: So, you told me all layers, you told me I have no impact on them. That was really demoralizing, you can make suggestions to the browser. It has its rules, it does its thing, right, you can say, hey, would you consider making this its own layer? Right, and they're like, it's gonna change, I'm just telling you.

[00:00:22]
Things are gonna change, you're not gonna wanna do all that repainting, browser, I'm telling you, right? You can convince the browser and recommend that it become its own layer. And so the way it works is a CSS property called will-change. And then whatever property you think is going to change.

[00:00:36]
And a lot of our examples are sidebar, we did with the transform. I have, every time I've used this, I think it takes so much arguments. Every time I've used this one, I'm using transform all the time. So that's gonna be the example that I use, cuz I couldn't come up with a good reason for another one.

[00:00:52]
All right, what's the support for this one look like? IE and Edge don't support it, and you'll be like, well, they are lagging behind. Actually, Edge is of the opinion that their compositing reasons are so good that they don't need your suggestions, right? [LAUGH] It's not like they're behind, that's not fair to whoever probably made that case that I oversimplify like that.

[00:01:15]
But we're amongst friends, it's cool [LAUGH]. They don't believe it's necessary, so they have no intent on implementing it. And the nice part is, this is a progressive enhancement. It's not like, well, I can't use it cuz I support IE or Edge, it just doesn't do anything then.

[00:01:28]
[LAUGH] Right, it's fine, it doesn't break the web page, it doesn't do anything wrong, it's just a no-op in that case. And then Opera Mini, it renders your web page as an image and sends it to the phone, so it doesn't do anything. Every time you see one of these can I use charts, Opera Mini is always red.

[00:01:46]
But other than that, it's got pretty good support across the rest of the browsers. And like I said, when it doesn't do anything, that is also fine cuz then it just doesn't do anything, it doesn't break. You can use it and browsers that support it will support it, browsers that don't, don't.

[00:02:01]
There was an old hack for this, which is translateZ. Which is to change the 3D positioning of an element. And you can see, we're setting it to 0, this will make it its own layer, but it will force it. will-change is a little bit better because you make the recommendation saying, this may become its own layer, I'm just telling you.

[00:02:21]
Before, you were like, that's its own layer, do it, and you've tricked the browser into doing it. You have this relationship of trust and you violated it, so that's not great. So generally speaking, this is a hack, this is kind of a hack, but it's a documented, supported, recommended hack, so it's fine.

[00:02:40]
Cool, so what I'm gonna do is, I'm gonna take that non-retina version of the page, and give it the CSS property of will-change, and we'll see what effect that has.
>> Steve Kinney: So if I go in here into, this one's called and go to style.css. I'm gonna tell the header,

[00:03:03]
>> Steve Kinney: And I'm gonna tell the footer the same thing. And I will go back,
>> Steve Kinney: And no more repaints. Very cool, and so it works, like I said, you got it for free if you're using read to screen, cuz the browser has made that optimization for you, I didn't have it, and now it exists.

[00:03:27]
We're gonna look at a slightly more intuitive example in a second, but let's go back.
>> Steve Kinney: So here were the layers before I made that change, here were the layers after. Let's do those slides two more times, before, after, before, after, right, get the major point? Now, when we scroll the page, that underlying layer is moving.

[00:03:53]
The compositor is basically just moving it, but it's not repainting it. We don't have to be like, hey, what you look like now with how much of you's in this slide? We simply slide it up and down underneath the header and the footer, which also aren't changing. And that's less work, less work is faster.

[00:04:09]
We got to skip painting, we got to skip layout, we went directly to compositor, which is great. So yeah, make everything a layer, right, seems great, layer all the things. Layers themselves aren't free, and it's, again, a set of trade-offs. So managing layers takes a certain amount of work on the browser's behalf.

[00:04:28]
Each layer needs to be kept in shared memory between the main and composite threads. When it's faster than painting, it's great, but if you go ahead and you make everything a layer, [LAUGH]. If everything is a layer, then you have this entire thing, you have to keep all of that in memory.

[00:04:45]
It's trying to help you out under the hood, this is like putting parentheses around everything to try to like help the parser in JavaScript, right? If you opt out of its helpful algorithms, you've effectively made it useless. If everything should be optimized, guess what, nothing is optimized. And our current example has a problem, right?

[00:05:08]
I told you, things that are transformed automatically get their own layer, right? Things that are position fixed on retina get their own layer. Also, it seems weird that it's called will-change, but it didn't really change anything, right? Seems like I've kind of hiding something from you this entire time.

[00:05:23]
Which is, the CSS rules are great for knowing, the browser's good at figuring out something that is its own layer. What will-change is really useful for is figuring out, wait, it wasn't its own layer before, and shouldn't have been its own layer. But might need to be its own layer very shortly, right?

[00:05:40]
So again, we render the page, but then JavaScript shows up and it's like, I'm gonna change everything, right? So we know, hey, this box, that's the example we're gonna use. But this element on the page, it was static, but the user's about to do something. I am going to make it a CSS trans, I'm gonna change the styles on it soon, right, you have two choices, browser.

[00:06:00]
Either A, you can figure out all this layer stuff at the moment I'm asking you to do stuff, or you can get ready, right? I'm gonna tell you that this box is gonna change, this element is gonna change. It's not changing yet, but why don't you, while you're not doing anything else, promote it to its own layer, so when it's time to get going, you're ready?

[00:06:18]
Right, so this is an example where it's not super helpful, right. We're already transforming this sidebar in this case, so it's already its own layer. But what might become more useful is to say, all right, imagine that top will-change isn't up there [LAUGH] so.
>> Steve Kinney: We'll have a transition, when they hover, we know that they're gonna click, right?

[00:06:48]
When they click, we're gonna add the open thing, right? We could theoretically promote it to its own layer as soon as they click. But when they hover, It's likely that they're going to click, right, so that's when we'll add the transform, and we do need to clean it up afterwards.

[00:07:01]
We'll add the transform, then it'll be promoted to it's own layer. By the time they get around to clicking, just slide that layer over. Right, it's a really useful way of doing it.