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 transforms u opacity, siempre se desencadena 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 el pintado
Si activas un diseño, siempre activarás la pintura, ya que si se modifica la geometría de un elemento sus píxeles deberán corregirse.
También puedes activar la pintura si modificas las propiedades no geométricas, como los fondos, el color del texto o las sombras. En esos casos, no se necesitará el diseño y la canalización se verá de la siguiente manera:
Usa Chrome DevTools 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.
Con esta opción habilitada, en Chrome la pantalla parpadeará con color verde cada vez que se aplique pintura. 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 de 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 Herramientas para desarrolladores para confirmar que al hacerlo obtuviste un beneficio de rendimiento. No promociones 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 de los problemas de pintura es que los navegadores unen dos áreas que necesitan pintura, y eso 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 demasiado, o encontrar estrategias para 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, todo elemento que incluya un desenfoque (como una sombra, por ejemplo) tardará más en pintarse que, por ejemplo, un cuadro rojo en dibujarse. 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 una cantidad de tiempo suficiente como para finalizar el trabajo de pintura, en particular en los dispositivos móviles.