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 usar 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
Notaste que tu página no se desplaza con fluidez. Así es como comenzarías a abordar el problema. En nuestro ejemplo, usaremos la página de demostración Things We Left On The Moon de Dan Cederholm.
Abres el Inspector web, inicias una grabación de la línea de tiempo y te desplazas hacia arriba y hacia abajo en la página. Luego, observas las líneas de tiempo verticales, que te muestran lo que sucedió en cada fotograma.
Si ves que la mayor parte del tiempo se dedica a la pintura (barras verdes grandes por encima de 60 fps), debes analizar con mayor detalle por qué sucede esto. Para investigar tus pinturas, usa la configuración Show paint rectangles del Inspector web (ícono de engranaje en la esquina inferior derecha del Inspector web). Se mostrarán las regiones en las que pinta Chrome.
Existen diferentes motivos por los que Chrome vuelve a pintar áreas de la página:
- Los nodos del DOM se cambian 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 un elemento, provoca cambios de estilo en ciertos elementos.
- Cualquier otra operación que haga que cambie el diseño de la página
Como desarrollador, debes tener en cuenta las repintadas que se producen en tu página.
Una buena manera de hacerlo es mirar los rectángulos de pintura. En la captura de pantalla de ejemplo anterior, puedes ver que toda la pantalla está cubierta por un gran rectángulo de pintura. Esto significa que toda la pantalla se vuelve a pintar a medida que te desplazas, lo que no es bueno. En este caso específico, esto se debe al estilo CSS background-attachment:fixed, que hace que la imagen de fondo de la página permanezca en la misma posición mientras el contenido de la página se mueve sobre ella a medida que te desplazas.
Si identificas que las repintadas cubren un área grande o tardan 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 se veían a medida que te desplazas hacia abajo. Sin embargo, hay casos en los que Chrome necesita volver a pintar ciertas áreas. Por ejemplo, la regla CSS
position:fixed, que se usa con frecuencia para elementos de navegación que permanecen en la misma posición, puede causar estas repintadas. - Si quieres conservar el diseño de la página, puedes intentar reducir el costo de pintura de 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 y desactiva los estilos en el panel Elementos y observa la diferencia en la grabación de Rutas, lo que significa que debes cambiar 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 de repintado constante y muestra un contador de la cantidad de trabajo de pintura que se está realizando. Luego, puedes ocultar elementos y mutar estilos, observando el contador, para descubrir qué es lo que ralentiza el proceso.
Configuración
Para usar el modo de pintura continua, debes usar Chrome Canary.
En los sistemas Linux (y algunos Macs), debes asegurarte de que Chrome se ejecute en modo de composición. Esto se puede habilitar de forma permanente con el parámetro de configuración GPU compositing on all pages en about:flags.
Cómo comenzar
El modo de pintura continua se puede habilitar a través de la casilla de verificación Habilitar el restablecimiento continuo de la página en la configuración del Inspector web (ícono de engranaje en la esquina inferior derecha del Inspector web).
La pequeña pantalla en la esquina superior derecha muestra los tiempos de pintura medidos en milésimas de segundo. Específicamente, muestra lo siguiente:
- El último tiempo de renderización medido 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 es probable que estos aspectos sean diferentes para tus usuarios.
Flujo de trabajo
Así es como puedes usar el modo de pintura continua para hacer un seguimiento de los elementos y los estilos que agregan mucho costo de pintura:
- Abre la configuración del Inspector web y marca Habilitar el restablecimiento continuo de la página.
- Ve al panel Elementos y recorre el árbol del DOM con las teclas de flecha o seleccionando elementos en la página.
- Usa la combinación de teclas H, una función de ayuda nueva, para activar o desactivar la visibilidad de un elemento.
- Observa el gráfico de tiempo de pintura y trata de detectar un elemento que agregue mucho tiempo de pintura.
- Revisa los estilos CSS de ese elemento y actívalos y desactívalos mientras observas el gráfico para encontrar el estilo que causa la ralentización.
- Cambia este estilo y realiza otra grabación de la Ruta de interacciones para verificar si tu página tuvo un mejor rendimiento.
En la siguiente animación, se muestra cómo alternar los estilos y su efecto en el tiempo de pintura:
En este ejemplo, se muestra cómo desactivar uno de los estilos 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 optimizarlas. Por lo tanto, si tienes un elemento
que recibe muchas repintadas, como en el ejemplo, debes evitar esta
combinación.
Notas
El modo de pintura continua vuelve a pintar toda la página visible. Por lo general, esto no es el caso cuando se navega por una página web. Por lo general, el desplazamiento solo pinta las partes que no eran 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, verifica con otra grabación de cronograma si tus mejoras de estilo realmente tuvieron un impacto en los tiempos de pintura de tu página.
Cuando usas continuous painting mode, es posible que descubras que, por ejemplo, los estilos CSS border-radius y box-shadow agregan mucho tiempo de pintura. No se desaconseja usar esas funciones en general, ya que son geniales y nos alegra que finalmente estén disponibles. Sin embargo, es importante saber cuándo y dónde usarlas.
Evita usarlos en áreas con muchas repintadas y evitar usarlos en exceso en general.
Demostración en directo
Haz clic a continuación para ver una demostración en la que Paul Irish usa la pintura continua para identificar una operación de pintura única y costosa.