JavaScript suele ser un activador de cambios visuales. A veces, realiza esos cambios directamente mediante manipulaciones de estilo y, otras veces, mediante cálculos que generan cambios visuales, como la búsqueda o clasificación de datos. El JavaScript sincronizado incorrectamente o de larga duración puede ser una causa común de los problemas de rendimiento, y debes intentar minimizar su impacto siempre que sea posible.
Cálculo de diseño
Si se modifica el DOM mediante la adición y la eliminación de elementos, la modificación de atributos, clases o la reproducción de animaciones, el navegador volverá a calcular los estilos de los elementos y, en muchos casos, el diseño de parte o toda la página. Este proceso se denomina cálculo de estilo.
El navegador comienza a calcular los estilos creando un conjunto de selectores de coincidencias para determinar qué clases, seudoselectores y IDs se aplican a un elemento determinado. Luego, procesa las reglas de estilo de los selectores coincidentes y determina los estilos finales que tiene el elemento.
El rol del recálculo del diseño en la latencia de interacción
Interaction to Next Paint (INP) es una métrica de rendimiento del tiempo de ejecución centrada en el usuario 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 fotograma, que muestra las actualizaciones visuales correspondientes a la interfaz de usuario.
Un componente importante de una interacción es el tiempo que tarda en pintarse el siguiente fotograma. 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 ocurren justo antes del trabajo de diseño, pintura y composición. Esta guía se enfoca en los costos de cálculo de estilo, pero reducir cualquier parte de la duración total de renderización de la interacción también reduce su latencia total.
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 */
}
Sin embargo, a medida que un proyecto se expande, es probable que necesite CSS más complejas. De esto podrían surgir selectores como los siguientes:
.box:nth-last-child(-n+1) .title {
/* styles */
}
Para determinar cómo se aplican estos estilos a la página, el navegador debe preguntar de manera efectiva lo siguiente: "¿Es este un elemento con una clase de title con un elemento superior de una clase de box que es el elemento secundario menos n más 1 de su elemento superior? El navegador puede tardar un tiempo en determinarlo. Para simplificar esto, puedes cambiar el selector 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 facilitan el trabajo del navegador. En la versión anterior, por ejemplo, para que el navegador sepa que un elemento es el último de su tipo, primero debe saber todo sobre todos los demás elementos para determinar si alguno de los elementos que lo siguen podría 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 solo en función de 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 más importante que la complejidad del selector, es la cantidad de trabajo que se debe realizar cuando cambia un elemento.
En términos generales, la peor situación en términos de exigencia al calcular el estilo computado de los elementos es la cantidad de elementos multiplicados por el conteo del selector, ya que el navegador debe verificar cada elemento al menos una vez con cada estilo para ver si hay coincidencia.
Los cálculos de estilo pueden orientarse directamente a algunos elementos en lugar de invalidar la página completa. En los navegadores modernos, esto ya no es un problema importante porque no siempre deben verificar todos los elementos que podría afectar un cambio. Por otro lado, los navegadores anteriores no siempre están tan optimizados para estas tareas. Cuando sea posible, 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 diseño en el navegador. Cada uno de ellos depende de si deseas medirlo en el navegador de tu entorno de desarrollo o si deseas medir cuánto tiempo tarda este proceso en los usuarios reales de tu sitio web.
Mide el costo de recalcular el estilo en las Herramientas para desarrolladores de Chrome
Una forma de medir el costo de recalcular el estilo es usar el panel de rendimiento en Chrome DevTools. Para comenzar, haz lo siguiente:
- Abre Herramientas para desarrolladores.
- Navega a la pestaña Rendimiento.
- Marca la casilla de verificación Selector stats (opcional).
- Haz clic en Grabar.
- Interactúa con la página.
Cuando detengas la grabación, verás algo similar a la siguiente imagen:
La franja de la parte superior es un gráfico de llama en miniatura que también traza fotogramas por segundo. Cuanto más cerca esté la actividad de la parte inferior de la tira, más rápido pintará el navegador los fotogramas. Si ves el gráfico tipo llama que se nivela en la parte superior con barras rojas sobre él, significa que hay trabajo que causa fotogramas de larga duración.
Vale la pena observar con mayor detalle los fotogramas de ejecución prolongada durante una interacción, como el desplazamiento. Si ves un bloque morado grande, acerca la actividad y selecciona cualquier trabajo etiquetado como Recalculate Style para obtener más información sobre el trabajo de recálculo de estilo potencialmente costoso.
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 señala el JavaScript que activó el cambio de diseño. También muestra la cantidad de elementos a los que afecta el cambio (un poco más de 900 en este caso) y el tiempo que tardó el cálculo de estilo. Puedes usar esta información para tratar de encontrar problemas en tu código y solucionarlos.
Si marcaste la casilla de verificación Selector stats en la configuración del Panel de rendimiento antes de realizar un seguimiento, el panel inferior del seguimiento tendrá una pestaña adicional con el mismo nombre.
Este panel proporciona datos útiles sobre el costo relativo de cada selector, lo que te permite identificar los selectores de CSS costosos.
Para obtener más información, consulta la documentación de las estadísticas de selectores de CSS.
Mide el costo del nuevo cálculo del estilo de los usuarios reales
Si tienes curiosidad por saber cuánto tiempo tarda en ocurrir el recálculo de estilo para los usuarios reales de tu sitio web, la API de Long Animation Frames te brinda las herramientas necesarias para hacerlo. Los datos de esta API se agregaron a la biblioteca de JavaScript web-vitals, incluido el tiempo de recálculo de estilo.
Si sospechas que la demora en la presentación de una interacción es el principal elemento que contribuye al INP de una página, te recomendamos que averigües cuánto de ese tiempo se dedica a volver a calcular los estilos en la página. Para obtener más información, lee sobre cómo medir el tiempo de recálculo de diseño en el campo.