Get best of the week

CSS Animation Performance Analysis

What to choose to animate elements of web pages? JavaScript or CSS? This question will one day be forced to ask every web developer. And maybe - and not once.

JavaScript programmers have created many libraries for browser animation. And it seems that everyone around was inclined to use these libraries as a ready-made solution for animation. But let's slow down. Is it correct? Should I animate web page elements using JavaScript? Maybe you can rely on standard CSS mechanisms and thereby achieve high-quality and high-performance animations?



Since you are reading this, I can assume that you are familiar with JavaScript animation. Therefore, I propose to explore the topic of CSS animation in its various manifestations, and also - I propose to talk about the performance of such an animation.

General information


CSS animations are based on some element properties. Among them, the following can be noted:

  • A property positionthat, in particular, can take the values absoluteand relative.
  • Property transform.
  • Property opacity.
  • Properties left, right, top, bottom.

To get started, take a look at a couple of pilot projects that use various CSS properties to animate elements.

Here is a project in which an element with an identifier animatewhose property is positionset to a value is animated absolute. The properties of the element topand are subject to change left.


Pilot Project Page

Below is the code that implements this animation.

#animate {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;

    animation: move 3s ease infinite;
}

@keyframes move {
    50% {
        top: 200px;
        left: 130px;
    }
}

Here is a project in which the same animation is implemented using the CSS property transform.

This animation is represented by the following code:

#animate {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;

    animation: move 3s ease infinite;
}

@keyframes move {
    50% {
        transform: translate(100px, 100px);
    }
}

Let's use these projects to draw conclusions about the performance of CSS animations, and about what kind of system resources are used to implement them.

If you just look at the pages of projects, you can decide what is implemented in them the same thing, albeit using different approaches. However, if you measure the performance of these projects using the Chrome developer tools, it turns out that they are different.

How does the browser display the page?


Before we delve into performance research, we need to understand how the browser displays the page, and what actions it takes if any changes occur on the page.

This is what the page output process looks like.


Page Output

Consider the events that are reflected in this figure.

  1. Recalculate Style - Calculation of styles to be applied to elements.
  2. Layout - Creation of layouts of elements and their placement on the page.
  3. Paint- filling the pixels of the created layers, that is - creating raster images for each layer. The GPU will use these images to display the page.
  4. Composite Layer- Layout layers and display them on the screen. The result will be the finished page.

An event Composite Layeris just the time when the CPU is communicating with the GPU to create an animation. Using CSS properties like transformand opacity, we can transfer the burden of generating animations from the CPU to the GPU.

Animation and GPU


A GPU is essentially a specialized computer used to work with images. It can efficiently process large amounts of graphic information.

As a result, when an event occurs Composite Layer, an additional layer is created. This is the mechanism by which you can avoid re-rendering the animated element and other interface elements.

Looking at the following figure, you might think that the animated elements are located on the same layer.


Animated elements ( original )

But if you look at the layers as if they are located in three-dimensional space, it turns out that when the animation is implemented using the transform property, an additional layer is created for the red circle. This makes it possible to output high-performance smooth animation.


An additional layer ( original ) has been created for the animated object. The

GPU keeps the tree of rendering objects in memory, and without re-rendering it can place the corresponding layer on top of other layers. In the case of animating an object using propertiestopandleft, the same layer, due to changes in properties, is rendered again and again. If you take an interest in the behavior of these CSS properties, it turns out that top and left affect the layout of the page, which leads to the need to re-render the page and re-arrange the layers.


Animation using properties translate and using top and left properties

This figure allows to see a serious difference between animation implemented using propertiestranslateand propertiestopandleft.

In the case of animations created withtopandleft, the circle is rendered at each position until it reaches the extreme position. After that, he begins to move to the starting position.

The following shows thePerformanceChrome Developer Toolbar with details about the animation process.


Animation using the translate property ( original )


Animation using the top and left properties ( original )

If you look at the detailed information about individual tasks presented in the panelPerformance, we can conclude that different actions are performed within these tasks. So, in the case of top / left animation, the task performs recalculation of styles, layout of layers, updating the tree of layers, creating a layout and rendering. In the case of translate animation, the only task the GPU solves is to move the layer without outputting anything to the DOM.

As a result, due to the use of powerful GPU features, using the translate animation, the main thread is freed. This improves application performance. The use of top / left animation leads to a large additional load on the main thread.


The load on the main stream created by the translate animation (left) and the top / left animation (right) (the original )

The above figure clearly demonstrates the load that falls on the main stream when performing top / left animation. This is the result of constant changes that need to be processed to perform such an animation.

Summary


As a result, we can conclude that, using CSS animations, it is worth paying attention to exactly what system resources are involved in their execution. If possible, it is worth using those that are performed by the GPU.

And what kind of animations do you use in your projects?

More articles:


All Articles