7 Cuellos de botella ocultos de rendimiento en JavaScript

Las aplicaciones web lentas rara vez fallan por culpa de malos algoritmos. Fallan por la forma en que tu código se comunica con el navegador.

Analicé más de 300 aplicaciones en producción. Descubrí que el 73% de los problemas de rendimiento provienen de estas 7 fuentes.

  1. Layout thrashing Esto ocurre cuando lees una propiedad de diseño (layout) y luego escribes en el DOM inmediatamente después. Esto obliga al navegador a recalcular el diseño varias veces. • Impacto: renderizado entre un 40-60% más lento. • Solución: Agrupa primero todas tus lecturas. Luego, agrupa todas tus escrituras usando requestAnimationFrame.

  2. Event listeners sin límites Añadir un listener sin eliminarlo provoca fugas de memoria (memory leaks). Este es un problema importante en las aplicaciones de una sola página (SPA). • Impacto: crecimiento de memoria del 15-30% por hora. • Solución: Usa un AbortController para limpiar los listeners cuando un componente se desmonte.

  3. Lecturas síncronas del DOM en bucles Leer propiedades como offsetWidth dentro de un bucle que también escribe en el DOM provoca reflows constantes. • Impacto: caídas de frames del 20-40%. • Solución: Guarda en caché los valores de diseño en una variable antes de que comience el bucle.

  4. Falta de agrupación con requestAnimationFrame Los cambios directos en el DOM durante eventos de scroll o resize se ejecutan con demasiada frecuencia. • Impacto: 10-25% de jank durante el desplazamiento. • Solución: Envuelve tus manejadores de scroll en requestAnimationFrame para sincronizarlos con el ciclo de pintado (paint cycle).

  5. Llamadas grandes a JSON.parse Analizar (parsear) archivos JSON enormes bloquea el hilo principal. Esto causa retraso en la entrada (input lag). • Impacto: congelamientos de 50-200 ms por llamada. • Solución: Usa Web Workers para analizar los datos fuera del hilo principal.

  6. Coincidencia de selectores CSS complejos Los selectores profundamente anidados o complejos ralentizan el recálculo de estilos. • Impacto: un 5-15% de tiempo adicional en estilos. • Solución: Simplifica tu estructura CSS y utiliza selectores más planos.

  7. Fragmentos de bundle duplicados Los bundles no optimizados desperdician ancho de banda. • Impacto: 100-500 KB de transferencia desperdiciada. • Solución: Usa herramientas como webpack-bundle-analyzer para encontrar y eliminar código duplicado.

Cómo medir tu progreso: • Abre Chrome DevTools y ve a la pestaña Performance. • Graba una sesión de 5 segundos. • Busca tareas largas en el gráfico de llamas (flame chart) de Main. • Aplica una solución y compara los tiempos de Rendering y Painting.

Enfócate en estas áreas para mejorar tus puntuaciones de Core Web Vitals.

Fuente: https://dev.to/kui_luo/how-to-find-and-fix-7-hidden-performance-bottlenecks-in-your-javascript-code-ek5