La pintura es el proceso de rellenar los píxeles que, finalmente, se integran a la composición pantallas. A menudo, es la tarea de ejecución más prolongada en la canalización, y la que se debe evitar siempre que sea posible.
La pintura es el proceso de rellenar los píxeles que, finalmente, se componen los usuarios pantallas. Suele ser la tarea que más tiempo se ejecuta en el y una 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. evítalo siempre que puedas.
- Reduce las áreas de pintura mediante la promoción de las capas y la orquestación de las animaciones.
- usar el generador de perfiles de pintura de Chrome DevTools para evaluar la complejidad y el costo de la pintura reducir siempre que sea posible.
Activar diseño y 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 se verá de la siguiente manera:
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 Pintura en la memoria flash.
Con esta opción activada, Chrome parpadeará en verde la pantalla cada vez que se pinte. Si ves que toda la pantalla parpadea con verde o áreas que no pensaste que deberían pintarse, entonces deberías investigar un poco más.
Promover elementos que se muevan o se atenúen
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 que se mueven en la pantalla con transformaciones pueden manejarse 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 de CSS will-change. 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 admiten will-change, pero que se benefician de la creación de capas, como Safari y Mobile Safari, debes utilizar (de forma incorrecta) una transformación 3D para forzar una nueva capa:
.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. Encontrarás más información al respecto 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 promuevas elementos sin generar perfiles.
Reduce las áreas de pintura
A veces, sin embargo, a pesar de promover los elementos, aún 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, y eso puede hacer que se vuelva a pintar toda la pantalla. Así, 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 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 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í lo hacen.
El generador de perfiles de pintura anterior 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 no suelen ser suficientes para finalizar el trabajo de pintura, especialmente en dispositivos móviles.