Análisis del rendimiento del selector CSS durante eventos de recalcular estilo

Cuando la página web tenga eventos recalcular estilo de ejecución prolongada, para identificar cuál de los selectores CSS ocupa la mayor parte del tiempo y da lugar a un rendimiento lento, use la pestaña Estadísticas del selector de la herramienta Rendimiento . La pestaña Estadísticas del selector proporciona estadísticas sobre los selectores de reglas CSS implicados en uno o varios eventos recalcular estilo dentro de una grabación de rendimiento.

La herramienta Rendimiento resalta cada tarea de ejecución prolongada con un triángulo rojo en la esquina superior derecha, para indicar el trabajo en el subproceso principal que tarda mucho tiempo en ejecutarse y tiene un rendimiento lento:

En las grabaciones de rendimiento, algunas de estas tareas de ejecución prolongada pueden ser eventos recalcular estilo . Un evento Recalculate Style realiza el seguimiento del tiempo que tarda el explorador en hacer lo siguiente:

• Recorra en iteración los elementos DOM de una página para buscar todas las reglas de estilo CSS que coincidan con un elemento determinado.
• Calcule el estilo real de cada elemento en función de las reglas de estilo CSS coincidentes.

Los estilos CSS deben recalcularse siempre que la aplicabilidad de las reglas CSS haya cambiado, como:

• Cuando se agregan o quitan elementos del DOM.
• Cuando se cambian los atributos de un elemento, como el valor de un class atributo o id .
• Cuando se produce la entrada del usuario, como un movimiento del mouse o un cambio de qué elemento de una página web tiene el foco, lo que puede afectar a :hover las reglas.

Registro de un seguimiento de rendimiento con estadísticas de selector habilitadas

Para ver las estadísticas de los selectores de reglas CSS durante los eventos recalcular estilo de ejecución prolongada, registre primero un seguimiento de rendimiento con la característica Estadísticas del selector habilitada. Para habilitar la característica Estadísticas del selector, active la casilla Habilitar estadísticas del selector CSS , que muestra la pestaña Estadísticas del selector .

La característica Estadísticas del selector no siempre está habilitada, ya que agrega más sobrecarga a las grabaciones de rendimiento. Solo debe dejarlo activado cuando necesite investigar el rendimiento de los eventos recalcular estilo y otra información de representación.

Para registrar un seguimiento de rendimiento con estadísticas de selector:

1. Abra una página web en una nueva ventana o pestaña, como la página de demostración de la Galería de fotos .

2. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

3. En DevTools, en la barra de actividad, seleccione la pestaña Rendimiento (). Si esa pestaña no está visible, seleccione Más herramientas () >Rendimiento.

4. En la herramienta Rendimiento , haga clic en el botón Configuración de captura ().

5. Active la casilla Habilitar estadísticas del selector CSS :

   

6. Haga clic en el botón Grabar () y, a continuación, ejecute el escenario que desea mejorar para su sitio web o aplicación.

7. Haga clic en el botón Detener .

A continuación, vea las estadísticas del selector CSS, como se describe en las secciones siguientes.

Visualización de estadísticas del selector de reglas CSS para un único evento

Para ver las estadísticas de los selectores de reglas CSS que participan en un único evento Recalculate Style :

1. Realice los pasos descritos anteriormente en Registro de un seguimiento de rendimiento con estadísticas de selector habilitadas.

2. Busque un evento Recalculate Style en la grabación de rendimiento y haga clic en él.

3. En la sección inferior de la herramienta Rendimiento , haga clic en la pestaña Estadísticas del selector :

   

Tabla de selectores CSS en la pestaña Estadísticas del selector

La pestaña Estadísticas del selector de la herramienta Rendimiento contiene una tabla de selectores CSS. En la tabla se muestra la siguiente información para cada selector CSS:

Columna	Descripción
Transcurrido (ms)	Cantidad de tiempo que el explorador ha dedicado a coincidir con este selector CSS. Este tiempo se proporciona en milisegundos (ms), donde 1 ms es 1/1000 de un segundo.
Coincidencia de intentos	Número de elementos que el motor del explorador intentó hacer coincidir con este selector CSS.
Recuento de coincidencias	Número de elementos que el motor del explorador coincide con este selector CSS.
% de coincidencias de rutas lentas	Proporción de elementos que no coincidieron con este selector CSS, con los elementos que el motor del explorador intentó coincidir y que requerían que el motor del explorador usara código menos optimizado para que coincida.
Selector	Selector CSS con el que se ha coincidido.
Hoja de estilos	Hoja de estilos CSS que contiene el selector CSS.

Cuando haya terminado, en la herramienta Rendimiento , haga clic en el botón Configuración de captura () y, a continuación, desactive la casilla Habilitar estadísticas del selector CSS .

Visualización de estadísticas del selector de reglas CSS para varios eventos

Para ver las estadísticas agregadas de los selectores de reglas CSS que participan en varios eventos recalcular estilo , copie varias tablas de estadísticas de selector en una hoja de cálculo, como se indica a continuación:

1. Realice los pasos descritos anteriormente en Registro de un seguimiento de rendimiento con estadísticas de selector habilitadas.

2. Busque el primer evento Recalcular estilo que le interesa y, a continuación, haga clic en él.

3. En la sección inferior de la herramienta Rendimiento , haga clic en la pestaña Estadísticas del selector .

4. Haga clic con el botón derecho en la tabla de estadísticas del selector y, a continuación, seleccione Copiar tabla:

   

5. Pegue la tabla en una hoja de cálculo, como Microsoft Excel.

6. Repita los pasos anteriores con los demás eventos recalcular estilo que le interesen.

Cuando haya terminado, en la herramienta Rendimiento , haga clic en el botón Configuración de captura () y, a continuación, desactive la casilla Habilitar estadísticas del selector CSS .

Visualización de estadísticas agregadas del selector de reglas CSS para la grabación completa

Para ver las estadísticas agregadas de los selectores de reglas CSS que participan en toda la grabación de rendimiento:

1. Realice los pasos descritos anteriormente en Registro de un seguimiento de rendimiento con estadísticas de selector habilitadas.

2. Anule la selección de cualquier evento seleccionado en la grabación de rendimiento haciendo clic en un área vacía del gráfico de llamas.

3. Seleccione todo el intervalo de grabación. Para ello, haga doble clic en el gráfico de CPU en la parte superior de la herramienta Rendimiento o, con el mouse, mantenga el puntero sobre el gráfico de llama y desplácese hacia arriba hasta que se muestre todo el gráfico.

4. En la sección inferior de la herramienta Rendimiento , haga clic en la pestaña Estadísticas del selector :

   

Cuando haya terminado, en la herramienta Rendimiento , haga clic en el botón Configuración de captura () y, a continuación, desactive la casilla Habilitar estadísticas del selector CSS .

Análisis de estadísticas del selector CSS

Para ordenar los datos que se muestran en la tabla Estadísticas del selector en orden ascendente o descendente, haga clic en un encabezado de columna. Por ejemplo, para ver qué selectores CSS tardan más tiempo, haga clic en el encabezado de columna Elapsed (ms):

Para intentar mejorar el rendimiento de la página web, céntrese en los selectores CSS que:

• tardó mucho tiempo en calcular (valor alto transcurrido (ms ),
• y que el explorador intentó hacer coincidir muchas veces (valor alto de intentos de coincidencia ),
• y con los que el explorador no coincidía realmente con muchos elementos (valor de recuento de coincidencias bajo en comparación con el valor de intentos de coincidencia ),
• y con un alto porcentaje de rutas lentas que no coinciden.

Por ejemplo, en la captura de pantalla anterior:

• El primer selector CSS (.gallery .photo .meta ::selection) requiere la mayor parte del tiempo.
• El motor del explorador intentó coincidir con este selector CSS 6017 veces, pero solo coincidió con 3234 elementos.
• De los 2783 elementos que no coincidieron, el 78 % de ellos requería código menos optimizado para coincidir.

Por lo tanto, este selector CSS es un buen candidato para intentar mejorar.

Intente cambiar los selectores CSS para que requieran menos tiempo para calcular y coincidan con menos elementos de la página. La forma de mejorar los selectores CSS depende de su caso de uso determinado. Repita los pasos descritos anteriormente en las secciones "Record" y "View" anteriores para confirmar que los cambios ayudaron a reducir la duración del evento Recalculate Style, en la columna Elapsed (ms).

Vea también

• Introducción a la herramienta de rendimiento : introducción al análisis del rendimiento en tiempo de ejecución en DevTools.
• Referencia de características de rendimiento : cubre muchas de las características de la herramienta Rendimiento .
• La verdad sobre el rendimiento del selector CSS : entrada de blog de Windows.