El panel Rendimiento 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 el trabajo en el subproceso principal que tarda mucho tiempo en ejecutarse y tiene un rendimiento lento:
En tus registros de rendimiento, algunas de estas tareas prolongadas pueden ser eventos Volver a calcular el estilo. Un evento Recalculate Style hace 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 CSS correspondientes.
Los estilos de CSS deben volver a calcularse siempre que haya cambiado la aplicabilidad de las reglas de CSS, por ejemplo, en los siguientes casos:
- Se agregan o se quitan elementos en el DOM.
- Si se cambian los atributos de un elemento, como el valor de un atributo de clase o ID.
- El usuario realiza una entrada, como mover el mouse o cambiar el foco de un elemento, lo que puede afectar las reglas de
:hover.
Si encuentras eventos Recalculate Style de larga duración, puedes usar la pestaña Estadísticas del selector para comprender cuáles de tus selectores CSS tardan más tiempo y ralentizan 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 seguimiento del rendimiento con las estadísticas del selector activadas
Para ver las estadísticas de tus selectores de reglas CSS durante eventos de larga duración Volver a calcular el estilo, registra un seguimiento de rendimiento con la configuración de captura Estadísticas del selector activada.
Para capturar un seguimiento de rendimiento con estadísticas del selector, haz lo siguiente:
Abre una página web, por ejemplo, la página de demostración de 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 check_box Habilitar las estadísticas del selector CSS.
Haz clic en radio_button_checked Record, ejecuta la situación que deseas mejorar y, luego, haz clic en stop_círculo 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 para un solo evento
Para ver las estadísticas de los selectores de reglas CSS que participan en un solo evento Recalculate Style, sigue estos pasos:
Registra un seguimiento de rendimiento con las estadísticas del selector activadas.
Busca un evento Recalculate Style en tu registro de rendimiento 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 Estadísticas de selectores
La pestaña Estadísticas de selectores contiene una tabla de selectores CSS. En la tabla, se muestra la siguiente información para cada selector de CSS:
| Columna | Descripción |
|---|---|
| Transcurrido (ms) | La cantidad de tiempo que el navegador tardó en coincidir con este selector de CSS. Este tiempo se expresa en milisegundos (ms), donde 1 ms equivale a 1/1,000 de un segundo. |
| Intentos de coincidencia | Indica la cantidad de elementos que el motor del navegador intentó hacer coincidir con este selector CSS. |
| Cantidad de coincidencias | Indica la cantidad de elementos que el motor del navegador coincidió con este selector CSS. |
| Porcentaje de rutas de acceso lentas que no coinciden | Es la proporción de 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 del navegador usara un código menos optimizado para coincidir. |
| Selector | El selector CSS que coincide. |
| Hoja de estilo | La hoja de estilo CSS que contiene el selector CSS |
Cuando termines, en el panel Rendimiento, abre settings Configuración de captura y desmarca la casilla check_box Habilitar las estadísticas del selector de CSS.
Consulta las estadísticas del selector de reglas de CSS para varios eventos
Para ver estadísticas adicionales de los selectores de reglas CSS que participan en varios eventos Recalculate Style, copia varias tablas de Estadísticas de selector en una hoja de cálculo, de la siguiente manera:
Registra un seguimiento de rendimiento con las estadísticas del selector activadas.
Busca el primer evento Recalculate Style que te interesa 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, como Hojas de cálculo de Google.
Repite los pasos anteriores con los demás eventos de Recalculate Style que te interesen.
Cuando termines, en el panel Rendimiento, abre settings Configuración de captura y desmarca la casilla check_box Habilitar las estadísticas del selector de CSS.
Ver las estadísticas totales del selector de reglas de CSS de la grabación completa
Para ver las estadísticas globales de los selectores de reglas de CSS que participan en todo el registro del rendimiento, sigue estos pasos:
Registra un seguimiento de rendimiento con las estadísticas del selector activadas.
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 que se encuentra en la parte superior del panel Rendimiento.
En la sección inferior del panel Rendimiento, abre la pestaña Estadísticas del selector. En la parte superior, verás una fila nueva con datos sobre los totales de todos los selectores.
Cuando termines, en el panel Rendimiento, abre settings Configuración de captura y desmarca la casilla check_box Habilitar las estadísticas del selector de CSS.
Analiza las estadísticas del selector de CSS
Para ordenar los datos en la tabla Estadísticas del selector de forma ascendente o descendente, haz clic en el encabezado de una columna. Por ejemplo, para ver qué selectores CSS tardan más tiempo, haz clic en el encabezado de la columna Transcurrido (ms).
Para tratar de mejorar el rendimiento de tu página web, enfócate en los selectores CSS que:
- El cálculo tardó mucho tiempo (valor alto de Elapsed (ms)).
- Con cuáles el navegador intentó establecer coincidencias muchas veces (valor alto de Intentos de coincidencia)
- Con qué el navegador no hizo coincidir muchos elementos (valor bajo de Recuento de coincidencias en comparación con el valor de Intentos de coincidencia).
- Que tienen un alto porcentaje de rutas lentas no coincidentes.
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 encontró ningún elemento.
Por lo tanto, este selector de CSS es el primer candidato que se debe intentar mejorar.
Intenta cambiar tus selectores CSS para que tarden menos tiempo en calcularse y coincidan con menos elementos en la página. La forma de mejorar los selectores CSS depende de tu caso de uso específico.
Repite los pasos de este instructivo para confirmar que tus cambios ayudaron a disminuir la duración del evento Recalculate Style, en la columna Elapsed (ms).