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 la página
Así que notaste que tu página no se desplaza bien. Así es como empezarías a abordar el problema. Para nuestro ejemplo, usaremos la página de demostración Things We Left On The Moon, de Dan Cederholm.
Abre el Inspector web, inicia una grabación de Rutas y desplaza la página hacia arriba y hacia abajo. Luego, observas los cronogramas verticales, que muestran lo que sucedió en cada fotograma.
Si ves que la mayor parte del tiempo se dedica a la pintura (grandes barras verdes superiores a 60 FPS), debes examinar con más detalle por qué sucede esto. Para investigar las pinturas, usa la configuración Mostrar rectángulos de pintura del Inspector web (ícono de engranaje en la esquina inferior derecha del Inspector web). Esto te mostrará las regiones donde Chrome pinta.
Existen diferentes motivos por los que Chrome vuelve a pintar las áreas de la página:
- Los nodos del DOM se cambian en JavaScript, lo que provoca 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 pasar el cursor del mouse, causa cambios de estilo en ciertos elementos.
- Cualquier otra operación que provoque que cambie el diseño de la página
Como desarrollador, debes estar al tanto de las repeticiones que ocurren en tu página.
Observar los rectángulos de pintura es una excelente manera de hacerlo. En la captura de pantalla de ejemplo anterior, puedes ver que toda la pantalla está cubierta con un rectángulo grande de pintura. Esto significa que toda la pantalla se vuelve a pintar a medida que te desplazas, lo cual no es bueno. En este caso específico, esto se debe al estilo de 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 repeticiones de imágenes 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 partes que no fueron visibles a medida que te desplazas hacia abajo. Sin embargo, hay casos en los que Chrome debe volver a pintar ciertas áreas. Por ejemplo, la regla de CSS
position:fixed, que a menudo se usa para los elementos de navegación que permanecen en la misma posición, puede hacer que estas repeticiones se vuelvan a procesar. - Si quieres mantener el diseño de la página, puedes 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. Calcular los costos de pintura de ciertos estilos puede ser mucho trabajo. Para ello, puedes activar o desactivar los estilos en el panel Elements y observar la diferencia en la grabación de Rutas, lo que significa 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 de la página. Pone la página en un estado de repeticiones constantes, lo que muestra un recuento de la cantidad de trabajo de pintura en curso. Luego, puedes ocultar los elementos y mutar los estilos, observando el contador, para averiguar qué es lento.
Configuración
Para usar el modo de pintura continua, debes usar Chrome Canary.
En los sistemas Linux (y algunas Mac), debes asegurarte de que Chrome se ejecute en modo de composición. Esto 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 empezar
El modo de pintura continua se puede habilitar a través de la casilla de verificación Habilitar el rediseño continuo de la página en la configuración del Inspector web (ícono de engranaje 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. Más concretamente, muestra lo siguiente:
- El último tiempo de pintura 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 procesamiento 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 estos elementos pueden ser diferentes para los usuarios.
Flujo de trabajo
Así es como puedes usar el modo de pintura continua para buscar los elementos y estilos que generan un gran costo de pintura:
- Abre la configuración del Inspector web y marca la opción Habilitar el rediseño continuo de la página.
- Ve al panel Elements y recorre el árbol del DOM con las teclas de flecha o eligiendo elementos en la página.
- Usa la combinación de teclas H, un nuevo asistente, para activar o desactivar la visibilidad de un elemento.
- Mira el gráfico del tiempo de pintura e intenta detectar un elemento que agregue mucho tiempo de pintura.
- Revisa los estilos de CSS de ese elemento, actívalos y desactívalos mientras miras el gráfico para encontrar el estilo que provoca la ralentización.
- Cambia este estilo y realiza otra grabación en Rutas para comprobar si esto mejoró el rendimiento de la página.
En la siguiente animación, se muestra cómo activar o desactivar los estilos y su efecto en el tiempo de pintura:
En este ejemplo, se muestra cómo desactivar cualquiera 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 realizar optimizaciones en función de esto. Por lo tanto, si tienes un elemento que se vuelve a renderizar muchas veces, como en el ejemplo, debes evitar esta combinación.
Notas
El modo de pintura continua vuelve a renderizar toda la página visible. Por lo general, este no es el caso cuando se navega por una página web. El desplazamiento solo pinta las partes que no eran visibles antes. 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 Rutas si las mejoras de estilo realmente afectaron los tiempos de pintura de la página.
Cuando usas continuous painting mode, es posible que descubras 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 usarlos.
Evita usarlos en áreas con muchos repeticiones de renderizado y evita usarlos demasiado en general.
Demostración en directo
Haz clic a continuación para ver una demostración en la que Paul Ireland utiliza la pintura continua para identificar una operación de pintura particularmente costosa.