En el panel Rendimiento, se marca cada tarea de larga duración con un triángulo rojo en la esquina superior derecha y una advertencia en la pestaña Resumen para indicar que el trabajo en el subproceso principal tarda mucho tiempo y tiene un rendimiento lento:
En tus grabaciones de presentaciones, algunas de estas tareas de larga duración pueden ser eventos Recalculate Style. El evento Recalculate Style realiza un seguimiento del tiempo que tarda el navegador en hacer lo siguiente:
- Itera los elementos del DOM en una página para encontrar todas las reglas de estilo CSS que coincidan con un elemento determinado.
- Calcula el estilo real de cada elemento según las reglas de estilo de CSS que coincidan.
Los estilos de CSS deberán volver a calcularse siempre que haya cambiado la aplicabilidad de las reglas CSS, por ejemplo, en los siguientes casos:
- Se agregan elementos al DOM o se quitan de él.
- Se cambian los atributos de un elemento, como el valor de un atributo de clase o ID.
- El usuario realiza una entrada, como un movimiento del mouse o un cambio de enfoque del elemento, lo que puede afectar las reglas de
:hover.
Los eventos Recalculate Style de larga duración pueden ser problemas para el rendimiento y causar demoras prolongadas en la presentación que afectan la Interaction to Next Paint (INP) de tu sitio web. Si encuentras eventos Recalculate Style de larga duración, puedes usar la pestaña Selector Stats para comprender cuál de tus selectores CSS lleva más tiempo y está ralentizando el rendimiento.
La pestaña Estadísticas del selector proporciona estadísticas sobre los selectores de reglas CSS que participaron en uno o más eventos Recalculate Style dentro de un registro de rendimiento.
Cómo capturar un registro de rendimiento con la opción Estadísticas del selector activada
Para ver las estadísticas de los selectores de reglas de CSS durante eventos de larga duración Recalculate Style, registra un seguimiento del rendimiento con la configuración de captura Selector Stats activada.
Para registrar un seguimiento del rendimiento con las estadísticas del selector, haz lo siguiente:
Abre una página web, por ejemplo, la página de demostración de la Galería de fotos.
Abre Herramientas para desarrolladores y navega al panel Rendimiento.
En el panel Rendimiento, haz clic en el botón settings Configuración de captura y marca la casilla de verificación check_box Habilitar estadísticas del selector CSS.
Haz clic en radio_button_checked Grabar, ejecuta la situación que quieres mejorar y, luego, haz clic en radio_button_checked Detener.
Luego, visualiza las estadísticas del selector CSS, como se describe en las siguientes secciones.
Cómo ver las estadísticas del selector de reglas de CSS de un solo evento
Para ver las estadísticas de los selectores de reglas de CSS involucrados en un solo evento Recalculate Style, haz lo siguiente:
Registra un registro de rendimiento con Selector Stats activada.
Busca el evento Recalculate Style en la grabación de tu presentación y haz clic en él.
En la sección inferior del panel Rendimiento, abre la pestaña Estadísticas del selector.
Tabla de selectores CSS en la pestaña Selector Stats
La pestaña Estadísticas del selector contiene una tabla de selectores CSS. En la tabla, se muestra la siguiente información para cada selector CSS:
| Columna | Descripción |
|---|---|
| Tiempo transcurrido (ms) | La cantidad de tiempo que el navegador tardó para coincidir con este selector CSS. Este tiempo se expresa en milisegundos (ms), en el que 1 ms equivale a 1/1,000 de segundo. |
| Intentos de coincidencia | Es la cantidad de elementos que el motor del navegador intentó coincidir con este selector CSS. |
| Cantidad de coincidencias | Es la cantidad de elementos que el motor del navegador coincidió con este selector CSS. |
| Porcentaje de rutas de acceso lentas sin coincidencias | Es la proporción de los elementos que no coincidían con este selector CSS, con los elementos con los que el motor del navegador intentó hacer coincidir y que requerían que el motor usara código menos optimizado para hacer coincidir. |
| Selector | El selector CSS que coincidió. |
| Hoja de estilo | La hoja de estilo CSS que contiene el selector CSS |
Cuando termines, en el panel Rendimiento, abre configuración Configuración de captura y desmarca la casilla de verificación check_box Habilitar estadísticas del selector CSS.
Cómo ver las estadísticas del selector de reglas de CSS de varios eventos
Para ver estadísticas agregadas de los selectores de reglas de CSS que participan en varios eventos Recalculate Style, copia varias tablas de Selector Stats en una hoja de cálculo, de la siguiente manera:
Registra un registro de rendimiento con Selector Stats activada.
Busca el primer evento Recalculate Style que te interese y, luego, haz clic en él.
En la sección inferior del panel Rendimiento, abre la pestaña Estadísticas del selector.
Haz clic con el botón derecho en la tabla de estadísticas del selector y selecciona Copiar tabla.
Pega la tabla en una hoja de cálculo, por ejemplo, en Hojas de cálculo de Google.
Repite los pasos anteriores con los demás eventos Recalculate Style que te interesan.
Cuando termines, en el panel Rendimiento, abre configuración Configuración de captura y desmarca la casilla de verificación check_box Habilitar estadísticas del selector CSS.
Ver las estadísticas agregadas del selector de reglas de CSS para el registro completo
Para ver las estadísticas agregadas de los selectores de reglas de CSS que participan en todo el registro de rendimiento:
Registra un registro de rendimiento con Selector Stats activada.
Haz clic en un área vacía del gráfico tipo llama para anular la selección de cualquier evento que se pueda seleccionar.
Selecciona todo el intervalo de grabación. Para ello, haz doble clic en el gráfico de CPU en la parte superior del panel Rendimiento.
En la sección inferior del panel Rendimiento, abre la pestaña Estadísticas del selector. Verás una fila nueva en la parte superior con datos sobre los totales de todos los selectores.
Cuando termines, en el panel Rendimiento, abre configuración Configuración de captura y desmarca la casilla de verificación check_box Habilitar estadísticas del selector CSS.
Analizar las estadísticas del selector CSS
Para ordenar los datos de la tabla Estadísticas del selector de forma ascendente o descendente, haz clic en un encabezado de columna. Por ejemplo, para ver qué selectores CSS tardan más tiempo, haz clic en el encabezado de la columna Elapsed (ms).
Para intentar mejorar el rendimiento de tu página web, enfócate en los selectores CSS que hacen lo siguiente:
- El cálculo tardó mucho tiempo (valor alto de Tiempo transcurrido (ms)).
- Con la que el navegador intentó establecer coincidencias muchas veces (valor alto de Intentos de coincidencia),
- Con qué navegador no coincidió con muchos elementos (bajo valor de Recuento de coincidencias en comparación con el valor de Intentos de coincidencia).
- Que tienen un porcentaje alto de rutas de acceso lentas sin coincidencias.
Por ejemplo, en la captura de pantalla anterior:
- El primer selector de CSS (
html body .ps[tooltip...) requirió más tiempo. - El motor del navegador intentó hacer coincidir este selector CSS 1,104 veces, pero no coincidió con ningún elemento.
Por lo tanto, este selector CSS es el primer candidato a tratar de mejorar.
Intenta cambiar tus selectores CSS de modo que requieran menos tiempo para calcular y hacer coincidir menos elementos en la página. La forma de mejorar los selectores CSS depende de tu caso de uso particular.
Repite los pasos de este instructivo para confirmar que los cambios ayudaron a disminuir la duración del evento Recalculate Style en la columna Elapsed (ms).