Q10: Animation Cost

[00:00:00]
>> Ready for question number 10. When animating the following properties, which have the correctly listed rendering costs? Is it width with layout, paint and composite, opacity with paint and composite, background image with just composite, left with layout, paint, and composite, or transform with paint and composite. Also, just remember that you can select multiple if you want.

[00:00:25]
And also, this is just kind of the default, it can be a little different sometimes in browsers depending on stuff. About, yeah, default. All right, let's look at the answer. So the only right ones are A, with width, layout, paint and composite, and D with left, also layout, paint, and composite.

[00:00:45]
So first let's go to the width. So when we're changing the width maybe like on hover we wanna go from 200 pixels to 300 pixels, the browser first has to calculate the new kind of geometry, the new sizes of the elements. Cuz it might also affect the other elements on the screen when we're changing the width.

[00:01:04]
So in that case it has to calculate all the positions again. Next it, of course, has to paint it because we just changed the width and finally, it always has to composite the layers together again. Now in this animation, it's a bit more dramatic browsers are very smart and optimizing to only repaint the parts that are affected by it, not the entire page again.

[00:01:25]
But yeah, changing any sizes will always cause a layout change. And then always a paint and composite as well, cuz it's kind of like a pipeline. When we change the opacity, we only have to composite. So opacity is one of those fun GPU accelerated properties where a browser will actually create or kind of promote that element to a separate layer, like a separate graphics layer.

[00:01:51]
And when changing the opacity what it can do is it can just change, I think it's called like the alpha channel on a graphics layer. I'm not into graphics at all. But basically, what it does is it can just change the layer's opacity. Not the entire layout, not the element itself within that same layout.

[00:02:05]
It can just change the layer's opacity. So it only has to change the opacity during that composite phase. So it doesn't have to do anything, it doesn't have to repaint, it doesn't have to layout, because we're not changing width or height or anything. And we're also not changing the pixels, it's just changing the opacity in that browser layer.

[00:02:20]
We'll talk a bit more about the GPU accelerated properties soon to see what other values kind of work the same way. It's also important to remember that in some cases, browsers might not create a separate layer for opacity, if we're not animating it, or if they think, like, okay, it doesn't really make sense, do you know?

[00:02:38]
Cuz creating a different layer, it consumes memory, consumes data. So you kind of wanna minimize the amount of layers that you have in an application. But when changing it, when hovering it, it first creates separate layer, composite it back, and then it can just be on the same layer.

[00:02:52]
So it's just for like the animation. Anyway, moving on to background image. So this one requires it paints and a composite. So it doesn't need layout because we're not changing with height, we're not changing anything there. But it does have to repaint the pixels to have that background image.

[00:03:07]
So this does require a paint and then of course, always a composite to get all those layers back together into one single image. And then we have left, which does affect the layout. We're changing, not necessarily the geometry, we're changing the position. So it might also alter the position of other elements on the page.

[00:03:26]
So the browser has to ensure that it knows where the other elements go when changing left. So this does require a layout and then eventually it paints to repaint those pixels. Again, this is a more dramatic one. It does this in a very optimized way and then compositing the layers back together into the final image.

[00:03:45]
And then finally transform is also one of those GPU accelerated ones. So when we transform, for example, we wanna move the elements to the right, I believe translate X, yeah, to the right 50 pixels. It does so by also promoting it to a separate layer, so it doesn't just repaint every time it forwards to a separate layer.

[00:04:05]
It can just move that layer on top of it and then composite it back together. So it doesn't have to do any layout because we're not changing any of the geometry of the elements that are on that base layout if that makes sense, it just promotes it and then they can just change that layer and then composite it back, if that makes sense.

[00:04:24]
So, yeah, this one is only composite because transform and translate X is one of those accelerated properties. So if you ever wanna move an element to the right or to the left, make sure to use translate X or translate Y, or whatever you need. Because that makes sure that you're not repainting, even though it's not every pixel, but if you were just to animate this with a left or with a right, the browser wouldn't promoted to a separate layer and then it would have to repaint the animation every time re-layout.

[00:04:51]
This is just super expensive cuz that all happens on the main thread, right? We saw with a task queue, it also has the UI rendering all those things. So you don't want that cuz it's all blocking the main thread. So yeah, that was the last one. Make sense?

[00:05:06]
Questions? No? Yeah, sorry.
>> I have a question about the opacity one.
>> Yeah.
>> I mean, I've seen in old code, like using opacity to change a color, if it was black, somebody would say, opacity 80%. Make it like grayer. That's a really bad way to do it now.

[00:05:24]
>> Yeah, well, I mean, you can do it. If you don't animate it, it's fine. If you just use an opacity, it won't create a separate layer just to show that opacity. This is more about animating the opacity. So during the animation, it will create a new layer and after the animation, it usually gets rid of that layer again.

[00:05:42]
Yeah, okay, I don't wanna spoil the next, but you can also use the will-change opacity, and in that case it will always create a new layer just for that element. But that wouldn't make sense if you're not animating it. Because it could have just eventually be composited back onto the the same layer if you're not changing it.

[00:06:03]
So then you're just consuming memory for no reason. But you can still do, I mean, using opacity to like make it gray. Honestly, I do that as well. I don't care if it looks gray, so it's fine. But yeah, then it just creates a layer but only during the very first composite and you won't see that layer in your browser.

[00:06:21]
So FYI, if you open dev tools in Chrome, there is a setting where you can actually see layers. And I think, maybe after this I can also just show you because it's a pretty fun tool. And you might be pretty surprised at just how many layers some websites have.

[00:06:36]
I can show Google. Yeah, I don't have anything that there, all right so, you can see layers for example and I'm pretty sure that Google, here you can see the different layers and you can kind of move around. You see all the different layers created here. These are all the layers. I am not sure that you are going to see that.

[00:06:57]
So here you can also see why, you see the compositing reasons, you see layer for link, highlight, frame, overlay, all that stuff. You have like scrollable stuff, secondary layer, they always give you a reason. Iframes also get their own layer, but you also see the memory estimate.

[00:07:13]
So, for one layer, this is 7.2 megabytes, and for this one is also 7.2. This is 1644 KB, all that kind of stuff. So this is why it's important to ensure that you don't create too many layers cuz they all consume memory and you don't always need that.