Get best of the week

An谩lisis de rendimiento de animaci贸n CSS

驴Qu茅 elegir para animar elementos de p谩ginas web? JavaScript o CSS? Esta pregunta alg煤n d铆a se ver谩 obligada a preguntar a todos los desarrolladores web. Y tal vez, y ni una sola vez.

Los programadores de JavaScript han creado muchas bibliotecas para la animaci贸n del navegador. Y parece que todos los que estaban alrededor estaban inclinados a usar estas bibliotecas como una soluci贸n preparada para la animaci贸n. Pero vamos m谩s despacio. 驴Es correcto? 驴Debo animar los elementos de la p谩gina web usando JavaScript? 驴Tal vez pueda confiar en los mecanismos CSS est谩ndar y as铆 lograr animaciones de alta calidad y alto rendimiento?



Como est谩s leyendo esto, puedo suponer que est谩s familiarizado con la animaci贸n JavaScript. Por lo tanto, propongo explorar el tema de la animaci贸n CSS en sus diversas manifestaciones y, adem谩s, propongo hablar sobre el rendimiento de dicha animaci贸n.

Informaci贸n general


Las animaciones CSS se basan en algunas propiedades de elementos. Entre ellos, se pueden observar los siguientes:

  • Una propiedad positionque, en particular, puede tomar los valores absolutey relative.
  • Propiedad transform.
  • Propiedad opacity.
  • Propiedades left, right, top, bottom.

Para comenzar, eche un vistazo a un par de proyectos piloto que utilizan varias propiedades CSS para animar elementos.

Aqu铆 hay un proyecto en el que se anima un elemento con un identificador animatecuya propiedad se positionestablece en un valor absolute. Las propiedades del elemento topy est谩n sujetas a cambios left.


La p谩gina del proyecto piloto a

continuaci贸n es el c贸digo que implementa esta animaci贸n.

#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;
    }
}

Aqu铆 hay un proyecto en el que se implementa la misma animaci贸n usando la propiedad CSS transform.

Esta animaci贸n est谩 representada por el siguiente c贸digo:

#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);
    }
}

Usemos estos proyectos para sacar conclusiones sobre el rendimiento de las animaciones CSS y sobre qu茅 tipo de recursos del sistema se utilizan para implementarlas.

Si solo mira las p谩ginas de los proyectos, puede decidir qu茅 se implementa en ellos de la misma manera, aunque utilizando diferentes enfoques. Sin embargo, si mide el rendimiento de estos proyectos utilizando las herramientas de desarrollador de Chrome, resulta que son diferentes.

驴C贸mo muestra la p谩gina el navegador?


Antes de profundizar en la investigaci贸n del rendimiento, debemos comprender c贸mo el navegador muestra la p谩gina y qu茅 acciones se toman si se produce alg煤n cambio en la p谩gina.

As铆 es como se ve el proceso de salida de la p谩gina.


Salida de p谩gina

Considere los eventos que se reflejan en esta figura.

  1. Recalculate Style - C谩lculo de estilos para aplicar a elementos.
  2. Layout - Creaci贸n de dise帽os de elementos y su colocaci贸n en la p谩gina.
  3. Paint- llenar los p铆xeles de las capas creadas, es decir, crear im谩genes r谩ster para cada capa. La GPU usar谩 estas im谩genes para mostrar la p谩gina.
  4. Composite Layer- Dise帽ar capas y mostrarlas en la pantalla. El resultado ser谩 la p谩gina terminada.

Un evento Composite Layeres justo el momento en que la CPU se comunica con la GPU para crear una animaci贸n. Usando propiedades CSS como transformy opacity, podemos transferir la carga de generar animaciones desde la CPU a la GPU.

Animaci贸n y GPU


Una GPU es esencialmente una computadora especializada que se utiliza para trabajar con im谩genes. Puede procesar eficientemente grandes cantidades de informaci贸n gr谩fica.

Como resultado, cuando ocurre un evento Composite Layer, se crea una capa adicional. Este es el mecanismo por el cual puede evitar volver a representar el elemento animado y otros elementos de la interfaz.

Si observa la siguiente figura, puede pensar que los elementos animados se encuentran en la misma capa.


Elementos animados ( original )

Pero si observa las capas como si estuvieran ubicadas en un espacio tridimensional, resulta que cuando la animaci贸n se implementa utilizando la propiedad de transformaci贸n , se crea una capa adicional para el c铆rculo rojo. Esto hace posible la producci贸n de animaci贸n fluida de alto rendimiento.


Se cre贸 una capa adicional ( original ) para el objeto animado. La

GPU mantiene el 谩rbol de renderizaci贸n de objetos en la memoria y, sin volver a renderizar, puede colocar la capa correspondiente encima de otras capas. En el caso de animar un objeto usando propiedadestopyleft, la misma capa, debido a cambios en las propiedades, se representa una y otra vez. Si le interesa el comportamiento de estas propiedades CSS, resulta que la parte superior e izquierda afectan el dise帽o de la p谩gina, lo que lleva a la necesidad de volver a representar la p谩gina y reorganizar las capas.


La animaci贸n usando propiedades se traduce y las propiedades superior e izquierda

Esta figura permite ver una seria diferencia entre la animaci贸n implementada usando propiedadestranslatey propiedadestopyleft.

En el caso de animaciones creadas contopyleft, el c铆rculo se representa en cada posici贸n hasta que alcanza la posici贸n extrema. Despu茅s de eso, comienza a moverse a la posici贸n inicial.

A continuaci贸n se muestra laPerformanceBarra de herramientas para desarrolladores de Chrome con detalles sobre el proceso de animaci贸n.


Animaci贸n usando la propiedad de traducci贸n ( original )


Animaci贸n utilizando las propiedades superior e izquierda ( original )

Si observa la informaci贸n detallada sobre las tareas individuales presentadas en el panelPerformance, podemos concluir que se realizan diferentes acciones en el marco de estas tareas. Entonces, en el caso de la animaci贸n superior / izquierda, como parte de la tarea, se recalculan los estilos, se organizan las capas, se actualiza el 谩rbol de capas, se crea y presenta el dise帽o. En el caso de la animaci贸n de traducci贸n, la 煤nica tarea que resuelve la GPU es mover la capa sin generar nada en el DOM.

Como resultado, debido al uso de potentes funciones de GPU, al usar la animaci贸n de traducci贸n, se libera el hilo principal. Esto mejora el rendimiento de la aplicaci贸n. El uso de animaci贸n superior / izquierda conduce a una gran carga adicional en el hilo principal.


La carga en la transmisi贸n principal creada por la animaci贸n de traducci贸n (izquierda) y la animaci贸n superior / izquierda (derecha) (la original )

La figura anterior muestra claramente la carga que cae en la transmisi贸n principal cuando se realiza la animaci贸n superior / izquierda. Este es el resultado de cambios constantes que deben procesarse para realizar dicha animaci贸n.

Resumen


Como resultado, podemos concluir que, usando animaciones CSS, vale la pena prestar atenci贸n exactamente a qu茅 recursos del sistema est谩n involucrados en su ejecuci贸n. Si es posible, vale la pena usar los que realiza la GPU.

驴Y qu茅 tipo de animaciones usas en tus proyectos?

More articles:


All Articles