Composición hace referencia al proceso en el que las partes pintadas de la página se unen para mostrarlas en la pantalla.
Composición hace referencia al proceso en el que 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 deben administrarse y las propiedades que usas para las animaciones.
Resumen
- Limítate a los cambios de transform y opacidad de tus animaciones.
- Promueve elementos en movimiento con
will-changeotranslateZ. - Evita usar en exceso las reglas de promoción; las capas requieren memoria y administración.
Usa los cambios de transform y opacity para las animaciones
En la versión con mejor rendimiento de la canalización de píxeles, se evitan tanto el diseño como la pintura, y solo se necesitan cambios en la composición:
Para lograr esto, deberás limitarte a las propiedades cambiantes que el compositor puede controlar únicamente. En la actualidad, esto se aplica solo a dos propiedades: transform y opacity:
La salvedad respecto del uso de los elementos transform y opacity es que el elemento en el que cambias estas propiedades debe estar en su propia capa del compositor. Para poder crear una capa, debes promover el elemento. Hablaremos de esto a continuación.
Cómo promover los elementos que deseas animar
Como mencionamos en la sección “Simplifica la complejidad de la pintura y reduce las áreas de pintura”, debes promover los elementos que deseas animar (dentro de lo razonable; no lo hagas en exceso) a su propia capa:
.moving-element {
will-change: transform;
}
Como alternativa, en el caso de los navegadores anteriores o aquellos que no sean 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 indicar que desearías promover cada elemento de la página. El problema es que cada capa que crees requerirá memoria y administración, y eso tiene consecuencias. De hecho, en los dispositivos con memoria limitada, el impacto en el rendimiento puede suponer un desequilibrio negativo contra cualquier beneficio que suponga la creación de una capa. Las texturas de cada capa deben subirse a la GPU, por lo que existen mayores restricciones en términos de ancho de banda entre la CPU y la GPU, y la memoria disponible para las texturas en la GPU.
Usa Chrome DevTools para comprender las capas de tu app
Para poder comprender las capas de tu aplicación y la razón por la cual un elemento posee una capa, debes habilitar el generador de perfiles Paint Profiler en Timeline de Chrome DevTools:
Cuando se active esta herramienta, debes iniciar 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:
Si haces clic aquí, aparecerá una nueva opción en los detalles: la pestaña Layer.
Esta opción te mostrará una nueva vista que te permitirá desplazarte, escanear y acercar todas las capas durante ese fotograma, junto con los motivos por los que se creó cada capa.
Con esta vista, puedes realizar un seguimiento de la cantidad de capas que tienes. Si pasas mucho tiempo en la composición durante acciones críticas para el rendimiento, como el desplazamiento o las transiciones (debes tratar de alcanzar unos 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.