El modo de pintura continua para la generación de perfiles de pintura ahora está disponible en Chrome Canary. En este artículo, se explica cómo identificar un problema en el tiempo de pintura de la página y cómo puedes utilizar esta nueva herramienta para detectar cuellos de botella en el rendimiento de la pintura.
Cómo investigar el tiempo de pintura en tu página
Por lo tanto, notaste que tu página no se desplaza fácilmente. Así es como empezarías a enfrentar el problema. Para nuestro ejemplo, usaremos la página de demostración Things We Left On The Moon de Dan Cederholm como ejemplo.
Abre el Inspector web, inicia la grabación de Timeline y desplaza tu página hacia arriba y abajo. Luego, observas las líneas de tiempo verticales, que muestran lo que sucedió en cada fotograma.
Si ves que la mayor parte del tiempo se usa para pintar (barras verdes grandes por encima de 60 FPS), debes analizar con más detalle por qué sucede esto. Para investigar tus pinturas, usa la configuración Show paint rectangles del Inspector web (ícono de ajustes en la esquina inferior derecha del Inspector web). Verás las regiones donde Chrome pinta.
Existen diferentes motivos por los que Chrome vuelve a pintar áreas de la página:
- Los nodos del DOM se modifican en JavaScript, lo que hace que Chrome vuelva a calcular el diseño de la página.
- Se están reproduciendo animaciones que se actualizan en un ciclo basado en fotogramas.
- La interacción del usuario, como colocar el cursor sobre elementos, provoca cambios de estilo en ciertos elementos.
- Cualquier otra operación que modifique el diseño de la página.
Como desarrollador, debes estar al tanto de las repeticiones de la imagen que se realizan en tu página.
Mirar los rectángulos pintados es una excelente manera de hacerlo. En la captura de pantalla de ejemplo anterior, puedes ver que toda la pantalla está cubierta con un gran rectángulo de pintura. Eso significa que se vuelve a pintar toda la pantalla a medida que te desplazas, lo cual no es recomendable. En este caso específico, esto se debe al background-attachment:fixed de estilo CSS, que hace que la imagen de fondo de la página permanezca en la misma posición mientras el contenido se mueve sobre ella a medida que te desplazas.
Si identificas que el nuevo procesamiento de imagen cubre un área grande o tarda mucho tiempo, tienes dos opciones:
- Puedes intentar cambiar el diseño de la página para reducir la cantidad de pintura. Si es posible, Chrome pinta la página visible solo una vez y agrega las partes que no fueron visibles cuando te desplazas hacia abajo. Sin embargo, hay casos en los que Chrome debe volver a pintar determinadas áreas. Por ejemplo, la regla de CSS
position:fixed, que se usa a menudo para los elementos de navegación que permanecen en la misma posición, puede provocar que se vuelvan a procesar. - Si deseas mantener el diseño de la página, puedes intentar reducir el costo de pintar las áreas que se vuelven a pintar. No todos los estilos de CSS tienen el mismo costo de pintura, algunos tienen poco impacto y otros mucho. Averiguar los costos de pintura de ciertos estilos puede ser mucho trabajo. Para ello, activa o desactiva los estilos del panel Elements y observa la diferencia en la grabación de Timeline, lo que implica alternar entre paneles y realizar muchas grabaciones. Aquí es donde entra en juego el modo de pintura continua.
Modo de pintura continua
El modo de pintura continua es una herramienta que te ayuda a identificar qué elementos son costosos en la página. Pone la página en un estado que siempre se vuelve a pintar, lo que muestra un contador de la cantidad de trabajo de pintura en curso. Luego, puedes ocultar los elementos y cambiar los estilos mientras miras el contador para descubrir lo que es lento.
Configuración
Para usar el modo de pintura continua, debes usar Chrome Canary.
En los sistemas Linux (y algunas Macs), debes asegurarte de que Chrome se ejecute en modo de composición. Se puede habilitar de forma permanente con la configuración de composición de GPU en todas las páginas en about:flags.
Cómo comenzar
El modo de pintura continua se puede habilitar a través de la casilla de verificación Habilitar la función de pintura continua de la página en la configuración del Inspector web (ícono de ajustes en la esquina inferior derecha del Inspector web).
La pantalla pequeña de la esquina superior derecha te muestra los tiempos de pintura medidos en milisegundos. Específicamente, muestra lo siguiente:
- El tiempo de pintura más reciente que se mide a la izquierda.
- El mínimo y el máximo del gráfico actual a la derecha.
- Un gráfico de barras que muestra el historial de los últimos 80 fotogramas en la parte inferior (la línea del gráfico indica 16 ms como punto de referencia).
Las mediciones del tiempo de pintura dependen de la resolución de la pantalla, el tamaño de la ventana y el hardware en el que se ejecuta Chrome. Ten en cuenta que estas cosas pueden ser diferentes para tus usuarios.
Flujo de trabajo
Así es como puedes usar el modo de pintura continua para rastrear los elementos y estilos que agregan mucho costo de pintura:
- Abre la configuración del Inspector web y marca la opción Habilitar la función continua de pintura de la página.
- Ve al panel Elements y recorre el árbol del DOM con las teclas de flecha o seleccionando elementos de la página.
- Para activar o desactivar la visibilidad de un elemento, usa la combinación de teclas para acceso directo H, una función de ayuda nueva.
- Analiza el gráfico de tiempo de pintura e intenta identificar un elemento que agregue mucho tiempo de pintura.
- Revisa los estilos CSS de ese elemento, actívalos y desactívalos mientras observas el gráfico para encontrar el estilo que causa la desaceleración.
- Cambia este estilo y realiza otra grabación en Rutas para comprobar si esto mejoró el rendimiento de tu página.
En la siguiente animación, se muestra cómo activar o desactivar estilos y su efecto en el tiempo de pintura:
En este ejemplo, se muestra cómo desactivar uno de los diseños CSS box-shadow o border-radius, reduce en gran medida el tiempo de pintura. El uso de box-shadow y border-radius en un elemento genera operaciones de pintura muy costosas, ya que Chrome no puede realizar optimizaciones para ello. Por lo tanto, si tienes un elemento que recibe muchas repeticiones, como en el ejemplo, debes evitar esta combinación.
Notas
El modo de pintura continua vuelve a procesar toda la página visible. Por lo general, este no es el caso cuando navegas por una página web. Por lo general, el desplazamiento solo pinta las partes que no fueron visibles antes. Y para otros cambios en la página, solo se vuelve a pintar el área más pequeña posible. Por lo tanto, consulta con otra grabación de Timeline si las mejoras de estilo realmente tuvieron un impacto en los tiempos de pintura de tu página.
Cuando uses continuous painting mode, podrías descubrir que, p.ej., los estilos de CSS border-radius y box-shadow agregan mucho tiempo de pintura. No se recomienda usar esas funciones en general, son geniales y nos alegra que finalmente estén aquí. Sin embargo, es importante saber cuándo y dónde utilizarlos.
Evita usarlos en áreas en las que haya muchas repeticiones de pintura y evita usarlos en exceso en general.
Demostración en directo
Haz clic a continuación para ver una demostración en la que Paul Ireland usa la pintura continua para identificar una operación de pintura única y costosa.