Limítate solo a las propiedades del compositor y administra el recuento de capas

En la composición, las partes pintadas de la página se unen para mostrarlas en la pantalla.

En la composición, las partes pintadas de la página se unen para mostrarse en la pantalla.

En esta área, hay dos factores clave que afectan el rendimiento de la página: la cantidad de capas del compositor que se deben administrar y las propiedades que usas para las animaciones.

Resumen

  • Limítate a los cambios de transformación y opacidad de tus animaciones.
  • Promueve elementos en movimiento con will-change o translateZ.
  • Evita usar en exceso las reglas de promoción; las capas requieren memoria y administración.

Cómo usar los cambios de transformación y opacidad para animaciones

La versión con mejor rendimiento de la canalización de píxeles evita el diseño y la pintura, y solo requiere cambios de composición:

La canalización de píxeles sin diseño ni pintura.

Para lograr esto, deberás limitarte a las propiedades de cambio que pueden administrarse solo con el compositor. En la actualidad, esto se aplica solo a dos propiedades: transform y opacity:

Son las propiedades que puedes animar sin activar el diseño ni la pintura.

La salvedad para el uso de los objetos transform y opacity es que el elemento en el que cambias estas propiedades debe estar en su propia capa del compositor. Para crear una capa, debes promover el elemento, tema que abordaremos a continuación.

Cómo promocionar los elementos que quieres animar

Como mencionamos en la sección "Simplifica la complejidad de la pintura y reduce las áreas de pintura", debes promover los elementos que planeas animar (dentro de lo razonable, no te excedas) a su propia capa:

.moving-element {
  will-change: transform;
}

O bien, en el caso de los navegadores anteriores o aquellos que no son compatibles con will-change:

.moving-element {
  transform: translateZ(0);
}

Administra las capas y evita las explosiones de capas

Puede resultar tentador, al saber que las capas suelen contribuir al rendimiento, promover todos los elementos de tu página con algo como lo siguiente:

* {
  will-change: transform;
  transform: translateZ(0);
}

Esta es una forma indirecta de decir que te gustaría promocionar todos los elementos de la página. El problema aquí es que cada capa que creas requiere memoria y administración, y eso no es gratuito. De hecho, en los dispositivos con memoria limitada, el impacto en el rendimiento puede superar con creces cualquier beneficio de crear una capa. Las texturas de cada capa deben subirse a la GPU, por lo que existen restricciones adicionales en términos de ancho de banda entre la CPU y la GPU, y la memoria disponible para las texturas en la GPU.

Use las Herramientas para desarrolladores de Chrome para comprender las capas de su aplicación

El botón de activación del generador de perfiles de pintura en las Herramientas para desarrolladores de Chrome.

Para comprender las capas de tu aplicación y la razón por la cual un elemento tiene una capa, debes habilitar el generador de perfiles de pintura en Rutas de las Herramientas para desarrolladores de Chrome:

Cuando esta opción esté activada, deberías realizar una grabación. Cuando la grabación haya finalizado, podrás hacer clic en cada uno de los fotogramas, que se encuentran entre las barras de fotogramas por segundo y los detalles:

Un fotograma para el que el desarrollador desea generar perfiles

Si haces clic aquí, aparecerá una nueva opción en los detalles: la pestaña de una capa.

El botón de la pestaña Capa en las Herramientas para desarrolladores de Chrome

Esta opción generará una nueva vista que te permite desplazar lateralmente, escanear y acercar todas las capas durante ese fotograma, junto con los motivos por los que se creó cada capa.

La vista de capas en las Herramientas para desarrolladores de Chrome

Con esta vista, puedes hacer un seguimiento del número de capas que tienes. Si dedicas mucho tiempo a la composición durante acciones críticas para el rendimiento, como el desplazamiento o las transiciones (debes alcanzar un rango de 4 a 5 ms), puedes usar esta información para ver cuántas capas tienes, por qué se crearon y, a partir de allí, administrar el recuento de capas en tu app.