This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "will-change Property" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Rachel Nabors: Now it's time that we have a talk about will-change. I've heard will-change come up a bit in the chat room. It's important for us to cover this. Will-change, ostensibly, is a CSS property that lets us give the browser a little heads up as to what other CSS properties we might possibly be animating in the future.
[00:00:23] This lets the browser go, aha, and it goes out there and makes some little, I don't know, tweaks, to how it's going to be handling those properties, so that it can give us the best performance. Used to be that we would do this using something called the hardware acceleration.
[00:00:40] And now what this does, this is the translateZ hack. And the translateZ hack is where chrome had this lovely feature, still probably has this feature, where it would take 3D transforms and put them on the GPU. So you would be getting these animations off the CPU where the JavaScript threat is and all this other stuff is going on, you put it on the GPU where it was all alone and happy and could be taken care of all by its little self.
[00:01:06] Unless you were putting everything on the GPU, in which case it could get pretty crowded in there and your phone might crash. So this is why people would add this translateZ thing, it's kind of a magical number. TranslateZ(0) is actually a way of saying, I'm going to transform this into 3D plane, but you don't actually.
[00:01:25] So it was a way of tricking the browser into kicking things over to the GPU. And sometimes, if it was used willy-nilly, it could actually cause more harm than good. So if you're thinking about using something like this, you probably shouldn't be. Magic fixes do not age well.
[00:01:39] When you have people coming in to maintain your code, they'll be like, what is this, I better not touch it, it might break something. So you can end up carrying all these not necessarily performant magical fixes with you for a long time. It creates technical debt. So this is not how we like to do things.
[00:01:57] Hacks are not future friendly, they just make you think that you're getting a good deal. So Chrome introduced will-change in hopes that they could prevent people from doing this sort of thing. The idea is that will-change, what you do here, you're supposed to use will-change just before you're going to animate something.
[00:02:17] This creates an interesting set of problems. You think, well all right, I'm gonna be using a transform on this thing in the future sometime, so I'll just will-change all the transforms. Well, you could do that. But it would be even more performant if you could do a just in time will-change on that transform.
[00:02:34] Say when somebody is hovering over something that if they click it, it will be transformed, then you could add the will-change just to that thing or maybe only if that thing is in view. So if you're using will-change, you'll also probably, to use it most effectively, going to be doing a lot of event-sniffing to figure out when people are getting close to making that change.
[00:02:56] It sounds a lot like doing the browser's work for it. And that is one of the complaints I have heard. That this is really just something that supports Chrome's, how shall I put this, Chrome's lack of focus on animation in its development processes. Because there are browsers that claim that they do not need will-change, Edge is one of them.
[00:03:19] I have heard an Edge developer on the Internet say that Edge will never have will-change, because will-change is not necessary for Edge's performance pipeline. So that gets into this thing, different browsers have different rendering processes, and some of them might not need this at all. So what is will-change but a magic number for Chrome?
[00:03:44]
>> Rachel Nabors: [LAUGH] So if you are gonna use will-change, which I would say is the more sanctioned version of the translateZ hack, as at least you're letting the browser decide when it wants to put things on the GPU or whatever it's going to do. So don't slap it on everything.
[00:04:01] If you slap will-change on everything, you are optimizing nothing. And let's take a look at this browser spread. At Caniuse.com, you'll see that will-change is rather well supported by Firefox, Chrome, Safari, and Opera even, my God. But, iOS Safari, Opera Mini and Internet Explorer totally not buying into the will-change movement.
[00:04:27] And I've all ready given you the reasons for why those browsers might be recalcitrant about adopting will-change.