JavaScript suele ser un activador de cambios visuales. A veces, eso hace que esas cambia directamente con manipulaciones de estilo y, en ocasiones, mediante cálculos que generan cambios visuales, como ordenar datos o buscarlos. Está sincronizada de manera incorrecta o JavaScript de larga duración puede ser una causa común de problemas de rendimiento, y para minimizar su impacto siempre que sea posible.
Cálculo de estilo
Cambiar el DOM agregando y quitando elementos, cambiando atributos, clases o reproducir animaciones hace que el navegador recalcular los estilos de los elementos y, en muchos casos, el diseño de una parte o toda la página. Este proceso se denomina cálculo de estilo.
El navegador comienza a calcular estilos creando un conjunto de selectores de coincidencias para determinan qué clases, ID y seudoselectores se aplican a un elemento determinado. Luego, procesa las reglas de estilo de los selectores de coincidencias y descifra y qué estilos finales tiene el elemento.
El rol del recálculo del diseño en la latencia de interacción
Interaction to Next Paint (INP) es un entorno de ejecución centrado en el usuario. métrica de rendimiento que evalúa la capacidad de respuesta general de una página ante las entradas del usuario. Mide la latencia de interacción desde que el usuario interactúa con la página hasta que el navegador pinta el siguiente marco que muestra las actualizaciones visuales correspondientes para la interfaz de usuario.
Un componente significativo de una interacción es el tiempo que tarda en pintar la siguiente marco. El trabajo de renderización realizado para presentar el siguiente fotograma se compone de muchas partes, incluido el cálculo de los estilos de página que se producen justo antes del diseño, la pintura y de la composición del trabajo. Esta guía se enfoca en los costos de cálculo de estilo, pero en la reducción mientras que cualquier parte de la duración total de renderización de la interacción también reduce su latencia.
Reduce la complejidad de tus selectores
La simplificación de los selectores CSS puede ayudar a acelerar los cálculos de estilo de tu página. Los selectores más simples hacen referencia a un elemento en CSS con solo un nombre de clase:
.title {
/* styles */
}
Pero, a medida que crece cualquier proyecto, es probable que necesite una CSS más compleja, por lo que con selectores que se ven así:
.box:nth-last-child(-n+1) .title {
/* styles */
}
Para determinar cómo se aplican estos estilos a la página, el navegador debe
pregunta "¿es este un elemento con una clase de title con un elemento superior de una clase de
¿box es el elemento secundario menos-nth-plus-1 de su elemento superior? Buscando
puede demorar un poco. Para simplificar esto, puedes cambiar el
para que sea un nombre de clase más específico:
.final-box-title {
/* styles */
}
Estos nombres de clase de reemplazo pueden parecer incómodos, pero hacen que
de que el trabajo sea mucho más sencillo. En la versión anterior, por ejemplo, para que el navegador sepa
un elemento es el último de su tipo, primero debe saber todo acerca de
otros elementos para determinar si algún elemento posterior
ser el nth-last-child. Esto puede ser mucho más costoso en términos de procesamiento que
hacer coincidir un selector con un elemento basándose únicamente en su nombre de clase.
Reduce la cantidad de elementos a los que se les aplica diseño
Otra consideración de rendimiento y, a menudo, es más importante que el selector complejidad) es la cantidad de trabajo que debe ocurrir cuando cambia un elemento.
En general, el peor costo de calcular el estilo de los elementos computados es el número de elementos multiplicado por el conteo del selector, porque el navegador necesita comprobar cada elemento al menos una vez en cada estilo para ver si coincidencias.
Los cálculos de estilo pueden orientarse directamente a algunos elementos en lugar de invalidarlos toda la página. En los navegadores modernos, esto suele ser un problema menor porque el navegador no siempre necesita verificar todos los elementos que puede afectar un cambio. Por otro lado, los navegadores más antiguos no siempre están optimizados para estas tareas. Dónde puedes, debes reducir la cantidad de elementos invalidados.
Mide el costo de recalcular el diseño
Existen dos maneras de medir el costo del nuevo cálculo del estilo en el navegador. Cada uno depende de si deseas medirlo en el navegador. en tu entorno de desarrollo o si quieres medir cuánto tiempo para los usuarios reales en tu sitio web.
Mide el costo del recalcular el estilo en las Herramientas para desarrolladores de Chrome
Una forma de medir el costo de los cálculos nuevos de estilo es usar la columna en Herramientas para desarrolladores de Chrome. Para comenzar, haz lo siguiente:
- Abre Herramientas para desarrolladores.
- Ve a la pestaña Rendimiento.
- Marca la casilla de verificación Estadísticas del selector (opcional).
- Haz clic en Grabar.
- Interactúa con la página.
Cuando detengas la grabación, verás algo como la siguiente imagen:
La franja en la parte superior es un gráfico de llamas en miniatura que también traza marcos por por segundo. Cuanto más cerca esté la actividad de la parte inferior de la tira, más rápida que está pintando el navegador. Si ves que el gráfico de llamas se nivela en la parte superior con barras rojas sobre ella, entonces hay trabajo que los fotogramas de larga duración.
Los fotogramas de larga duración durante una interacción, como el desplazamiento, valen la pena más estilo. Si ves un bloque grande de color púrpura, acércate a la actividad y selecciona trabajo etiquetado como Recalculate Style para obtener más información sobre los posibles costoso de recálculo de estilo.
Cuando haces clic en el evento, se muestra su pila de llamadas. Si el trabajo de renderización se debe a una interacción del usuario, se menciona el JavaScript que activó el cambio de estilo. También muestra el número de elementos que afecta el cambio (un poco más de 900). elementos en este caso, y cuánto tiempo tardó el cálculo de estilo. Puedes usar esta para intentar encontrar una solución en el código.
Si marcaste la casilla de verificación Estadísticas del selector en la configuración del Panel de rendimiento antes de hacer un seguimiento tendrá una pestaña adicional con el mismo nombre.
Este panel brinda datos útiles sobre el costo relativo de cada selector, lo que permite a identificar selectores de CSS costosos.
Para obtener más información, consulta la documentación de estadísticas del selector CSS.
Mide el costo del recálculo del estilo de los usuarios reales
Si quieres saber cuánto tarda el nuevo cálculo del estilo en
usuarios reales de tu sitio web, la API de Long Animation Frames
te da las herramientas necesarias para hacerlo. Los datos de esta API se agregaron al
Biblioteca JavaScript de web-vitals,
incluido el tiempo de recálculo del estilo.
Si sospechas que la demora en la presentación de una interacción es lo principal que contribuye al INP de una página, debes averiguar cuánto de ese tiempo recalculando los estilos en la página. Para obtener más información, lee sobre cómo medir el tiempo de recálculo del estilo en el campo.
Recursos
- Estadísticas de los selectores en las Herramientas para desarrolladores de Chrome
- Invalidación de estilo en Blink
- Interacción con el siguiente procesamiento de imagen (INP)
- La biblioteca JavaScript
web-vitals - Mide el tiempo de recálculo del estilo en el campo
Hero image de Unsplash, de Markus Spiske.