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 calculado.
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.
Tiempo de recálculo de diseño y 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 página se centra en los costos de cálculo de estilo, pero en la reducción de la fase de renderización relacionada con la interacción también reduce su de latencia, incluso para los cálculos de estilo.
Reduce la complejidad de tus selectores
Simplificar los nombres de tu selector puede ayudar a acelerar el estilo de tu página realizar cálculos. 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 "¿Se trata de un elemento con una clase de title cuyo elemento superior es el
el elemento secundario menos-nth-plus-1 con una clase de box?"
Averiguar esto puede llevar mucho tiempo, dependiendo del selector que se use como
así como el navegador en cuestión. Para simplificar esto, puedes cambiar el selector
para que sea solo un nombre de clase:
.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 solo porque su clase coincida.
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
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.
- 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 información para tratar de encontrar una solución en tu código.
Usa Bloquear, Elemento y Modificador
Enfoques de programación como BEM (bloque, elemento, modificador) integrar en el selector los beneficios de rendimiento coincidentes. BEM recomienda lo siguiente: todo tiene una sola clase y, cuando se necesita jerarquía, esa jerarquía también se integra en el nombre de la clase:
.list {
/* Styles */
}
.list__list-item {
/* Styles */
}
Si necesitas un modificador, como en el último ejemplo de elemento secundario, puedes agregarlo, como esto:
.list__list-item--last-child {
/* Styles */
}
BEM es un buen punto de partida para organizar tus CSS, tanto desde una estructura y, gracias a las simplificaciones de búsqueda de estilo que promueve.
Si no te gusta BEM, existen otras formas de abordar tu CSS, pero deberías y evaluar su rendimiento y ergonomía antes de comenzar.
Recursos
Hero image de Unsplash, de Markus Spiske.