La pintura es el proceso de rellenar los píxeles que, finalmente, se convierten en una composición en la pantalla del usuario. A menudo, es la tarea del proceso que más tiempo se ejecuta, y la que se debe evitar siempre que sea posible.
Resumen
- Si se cambia alguna propiedad que no sea Vision o Settings, siempre se activa la función de pintura.
- La pintura suele ser la parte más costosa de la canalización de píxeles. Evita esta situación siempre que puedas.
- Reduce las áreas de pintura mediante la promoción de las capas y la orquestación de las animaciones.
- Usa el generador de perfiles de pintura de Chrome DevTools para evaluar la complejidad y el costo de la pintura; reduce su uso siempre que sea posible.
Cómo se activan el diseño y la pintura
Si activas el diseño, siempre activarás la pintura, ya que cambiar la geometría de cualquier elemento significa que se deben corregir sus píxeles.
También puedes activar la pintura si cambias las propiedades no geométricas, como los fondos, el color del texto o las sombras. En esos casos, el diseño no será necesario y la canalización tendrá el siguiente aspecto:
Usa las Herramientas para desarrolladores de Chrome para identificar rápidamente los cuellos de botella de pintura
Puedes usar las Herramientas para desarrolladores de Chrome para identificar rápidamente las áreas que se pintan. Abre la pestaña Renderización y, luego, habilita Paint Flashing.
Si habilitas esta opción, Chrome destellará la pantalla de color verde cada vez que se pinte. Si ves que toda la pantalla parpadea con color verde o que esto sucede en algunas áreas de la pantalla que según tu parecer no deberían pintarse, te recomendamos investigar un poco más sobre el tema.
Cómo promover elementos que se mueven o se atenúan
La pintura no siempre se realiza en una sola imagen en la memoria. De hecho, es posible que el navegador aplique pintura en varias imágenes, o capas del compositor, si es necesario.
El beneficio de este enfoque es que los elementos que se vuelven a pintar regularmente o se mueven en la pantalla mediante transforms pueden manipularse sin afectar a los demás elementos. Es lo mismo que con los paquetes de arte, como Sketch, GIMP o Photoshop, donde las capas individuales se pueden manejar y componer una sobre otra para crear la imagen final.
La mejor manera de crear una capa nueva es usar la propiedad CSS will-change, que está disponible en todos los motores de navegadores modernos principales. Con un valor de transform, will-change creará una nueva capa del compositor:
.moving-element {
will-change: transform;
}
Sin embargo, debes tener suficiente precaución para no crear demasiadas capas, ya que para cada una se requiere memoria y administración. Podrás encontrar más información en la sección Limítate solo a las propiedades del compositor y administra el recuento de capas.
Si promoviste un elemento a una capa nueva, usa DevTools para confirmar que al hacerlo obtuviste un beneficio de rendimiento. No promuevas elementos sin generar perfiles.
Reduce las áreas de pintura
Sin embargo, a veces, aunque se promuevan los elementos, será necesario realizar trabajos de pintura de todos modos. Un gran desafío, en términos de problemas relacionados con la pintura, es que los navegadores unen dos áreas que necesitan pintura; esto puede hacer que se vuelva a pintar toda la pantalla. Por ejemplo, si tienes un encabezado fijo en la parte superior de la página y un elemento que se está pintando en la parte inferior de la pantalla, es posible que se pinte nuevamente toda la pantalla.
Reducir las áreas de pintura suele implicar orquestar tus animaciones y transiciones para que no se superpongan tanto, o encontrar formas de evitar animar ciertas partes de la página.
Simplifica la complejidad de la pintura
Cuando se trata de la pintura, algunas tareas son más costosas que otras. Por ejemplo, cualquier elemento que incluya un desenfoque (como una sombra, por ejemplo) llevará más tiempo en pintar que, por ejemplo, dibujar un cuadro rojo. Sin embargo, en términos de CSS, esto no siempre es evidente: background: red; y box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); no necesariamente se ven como si tuvieran características de rendimiento muy diferentes, pero de hecho las tienen.
Como se muestra en la captura de pantalla anterior, el generador de perfiles de pintura te permite determinar si necesitas buscar otras maneras de lograr efectos. Pregúntate si es posible utilizar un conjunto de estilos más económico o medios alternativos para obtener el resultado final.
Siempre que sea posible, evita aplicar pintura durante las animaciones en particular, ya que los 10 ms que tienes por fotograma no suelen ser suficientes para finalizar el trabajo de pintura, especialmente en dispositivos móviles.