Simplifica la complejidad de la pintura y reduce las áreas de pintura

La pintura es el proceso de rellenar los píxeles que, finalmente, se integran a la composición de las pantallas de los usuarios. A menudo, es la tarea de la canalización que más tiempo se ejecuta, y la que se debe evitar siempre que sea posible.

La pintura es el proceso de rellenar los píxeles que, finalmente, se integran a la composición de las pantallas de los usuarios. A menudo, es la tarea de la canalización que más tiempo se ejecuta, y la que se debe evitar siempre que sea posible.

Resumen

  • Si se modifica alguna propiedad que no sea alguna de estas opciones, siempre se activará la pintura.
  • La pintura suele ser la parte más costosa de la canalización de píxeles; evítala siempre que sea posible.
  • 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 Herramientas para desarrolladores de Chrome para evaluar la complejidad y el costo de la pintura; reduce su uso siempre que sea posible.

Cómo activar 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 implica que sus píxeles deben corregirse.

La canalización completa de 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 se verá de la siguiente manera:

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

Cómo usar 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 Rendering y, luego, habilita Paint Flashing.

Con esta opción activada, Chrome hará parpadear la pantalla con color verde cada vez que se aplique pintura. Si ves que toda la pantalla parpadea con color verde o áreas que no crees que deberían pintarse, deberías investigar un poco más.

La página parpadea en verde cada vez que se pinta.

Promueve elementos que se muevan o se atenúen

La pintura no siempre se realiza en una sola imagen de la memoria. De hecho, es posible que el navegador pinte en varias imágenes, o capas del compositor, si es necesario.

Representación de las capas del compositor.

El beneficio de este enfoque es que los elementos que se vuelven a pintar regularmente o se mueven en la pantalla con transformaciones se pueden manejar sin afectar a otros elementos. Esto es lo mismo que con los paquetes de arte como Sketch, GIMP o Photoshop, en los que las capas individuales se pueden manejar y componer una encima de la otra para crear la imagen final.

La mejor manera de crear una capa nueva es usar la propiedad will-change de CSS. Esto funcionará en Chrome, Opera y Firefox y, con un valor de transform, creará una nueva capa del compositor:

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

En el caso de los navegadores que no son compatibles con will-change, pero se benefician de la creación de capas, como Safari y Mobile Safari, debes usar (de forma inadecuada) una transformación 3D para forzar una capa nueva:

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

Sin embargo, se debe tener cuidado de no crear demasiadas capas, ya que cada una requiere memoria y administración. Puedes obtener 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 las Herramientas para desarrolladores para confirmar que esto te haya brindado un beneficio de rendimiento. No promuevas elementos sin generar perfiles.

Reduce las áreas de pintura

A veces, sin embargo, aunque se promuevan los elementos, todavía es necesario hacer un trabajo de pintura. Un gran desafío de los problemas de pintura es que los navegadores unen dos áreas que necesitan pintura, lo que puede provocar que se vuelva a pintar toda la pantalla. Por ejemplo, si tienes un encabezado fijo en la parte superior de la página y algo que se está pintando en la parte inferior de la pantalla, es posible que se vuelva a pintar toda la pantalla.

Reducir las áreas de pintura suele implicar organizar tus animaciones y transiciones para que no se superpongan demasiado, o encontrar formas de evitar animar ciertas partes de la página.

Simplifica la complejidad de la pintura

El tiempo que tarda pintar parte de la pantalla.

Cuando se trata de pintar, algunas cosas son más costosas que otras. Por ejemplo, todo lo que incluya un desenfoque (como una sombra, por ejemplo) tardará más en pintar que, por ejemplo, dibujar un cuadro rojo. Sin embargo, en términos de CSS, esto no siempre es obvio: background: red; y box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); no necesariamente parecen tener características de rendimiento muy diferentes, pero sí.

El generador de perfiles de pintura mencionado con anterioridad te permitirá determinar si necesitas buscar otras maneras de lograr efectos. Pregúntate si es posible usar 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 normalmente no son suficientes para completar el trabajo de pintura, en especial en dispositivos móviles.