El uso de CPU de animación de fotogramas clave CSS es alto, ¿debería ser de esta manera?

Una de las formas posibles de reducir la carga en la CPU, es usar una llamada null transform hack, que a menudo es aclamada como una especie de bala de plata. En muchos casos mejorará drásticamente el rendimiento de renderizado en navegadores WebKit y Blink como Chrome, Opera y Safari.

Uso del" hack de transformación nula " (un modo de composición por hardware)

El hack de transformación nula básicamente hace dos cosas:

1. Activa el modo de composición por hardware (suponiendo que es compatible con la plataforma)
2. Crea una nueva capa con su propia superficie de respaldo

Para" forzar " un navegador, simplemente agregue una de estas propiedades CSS al elemento:

transform: translateZ(0);

/* or its friend: */
transform: translate3d(0, 0, 0);

Cuando se trabaja con transformaciones 3D, es bueno tener estas propiedades también para mejorar el rendimiento :

backface-visibility: hidden;
perspective: 1000;

Advertencias del "hack de transformación nula"

Habilitar una aceleración de hardware en CSS3 para muchos objetos puede ralentizar ¡abajo el rendimiento! Aparentemente, cada transformación 3D nula crea una nueva capa. Sin embargo, la creación de capas de hacking forzado puede no ser siempre la solución a ciertos cuellos de botella de rendimiento en una página. Las técnicas de creación de capas pueden aumentar la velocidad de la página, pero tienen un costo: ocupan memoria en la RAM del sistema y en la GPU. Por lo tanto, incluso si la GPU hace un buen trabajo, la transferencia de muchos objetos podría ser un problema, por lo que el uso de la aceleración de la GPU podría no valer la pena. La cita de W3C :

Sin embargo, configurar el elemento en una capa nueva es una operación relativamente costosa, que puede retrasar el inicio de una animación de transformación en una notable fracción de segundo.

Mover algunos objetos grandes tiene un rendimiento más alto que mover muchos objetos pequeños cuando se usa la aceleración 3D. Así que deben usarse sabiamente y debe asegurarse de que la aceleración de hardware de su operación realmente ayude al rendimiento de su página, y que un cuello de botella de rendimiento no está siendo causado por otra operación en su página.

Además, una GPU está diseñada específicamente para realizar cálculos matemáticos/geométricos complejos, y la descarga de operaciones en la GPU puede producir un consumo masivo de energía. Obviamente, cuando el hardware se activa, también lo hace la batería del dispositivo objetivo.

El camino moderno: la propiedad will-change

El progreso no está parado en un solo lugar... W3C introducido las will-change Propiedad CSS. Para acortar la historia, la propiedad will-change le permite informar al navegador con anticipación de qué tipos de cambios es probable que realice en un elemento, para que pueda configurar las optimizaciones adecuadas antes de que sean necesarias.

Esto es lo que dicen en el borrador :

La propiedad will-change definida en esta especificación permite al autor declarar con anticipación qué propiedades es probable que cambien en el futuro, por lo que el UA puede configurar las optimizaciones apropiadas algún tiempo antes de que sean necesarias. De esta manera, cuando ocurre el cambio real, la página se actualiza de manera rápida.

Usando will-change, insinuar al navegador sobre una próxima transformación puede ser tan simple como agregar esta regla al elemento que espera ser transformado:

will-change: transform;

Al desarrollar para dispositivos móviles, los desarrolladores se ven obligados a tener en cuenta la amplia gama de restricciones de dispositivos al escribir web móvil aplicaciones. Los navegadores se están volviendo más inteligentes, y a veces, es mejor dejar la decisión a la propia plataforma, en lugar de superponer la aceleración y forzar el comportamiento de una manera hackeada.

Tuve un caso similar de alto uso de CPU al animar algunos elementos con CSS3. Estaba animando la propiedad"izquierda" de ~7 elementos, con algunas propiedades de opacidad y sombra usadas en toda mi página. Decidí cambiar a jQuery.animate, que lamentablemente no mejoró el rendimiento en absoluto. Mi CPU (i7) todavía estaba en ~9-15% mientras mostraba la página, varios trucos (translateZ, etc.) tampoco mejoraron realmente el rendimiento, mientras que mi diseño estaba desordenado (algunos elementos posicionados en absoluto estamos involucrados, ouch!).

Entonces me topé con esta maravillosa extensión: http://playground.benbarnett.net/jquery-animate-enhanced/

Simplemente hice referencia a la .js-archivo, no hizo un solo cambio en las transiciones de jQuery, y mi uso de la CPU es ahora 1-2% en la misma página.

Mi recomendación: cuando tengas problemas de CPU usando transiciones CSS3, cambia a jQuery + el complemento animate-enhanced-plugin.

También puede usar esto en cualquiera de los siguientes elementos de clase donde desee usar GPU en lugar de CPU

.no-cpu {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
}

<element class="event_indicator no-cpu">animation...</element >