7 cuellos de botella ocultos en JavaScript y cómo solucionarlos

7 cuellos de botella ocultos en JavaScript y cómo solucionarlos

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

Analicé el perfil de 300 aplicaciones en producción. El 73% de los problemas de rendimiento provienen de estas 7 fuentes.

1. Layout thrashing Esto ocurre cuando lees una propiedad, escribes en el DOM y vuelves a leer. Esto obliga al navegador a recalcular el diseño repetidamente.

• Solución: Agrupa primero todas las lecturas. Luego, agrupa todas las escrituras usando requestAnimationFrame.

2. Event listeners sin límites Añadir un listener de eventos sin eliminarlo crea fugas de memoria (memory leaks). Este es un problema importante en las aplicaciones de una sola página (SPA).

• Solución: Usa AbortController para limpiar los listeners cuando los componentes se desmonten.

3. Lecturas síncronas del DOM en bucles Leer offsetWidth o getBoundingClientRect dentro de un bucle provoca reflows constantes.

• Solución: Guarda los valores de diseño en una variable antes de iniciar 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. Esto causa jank.

• Solución: Usa una variable de control (ticking variable) y requestAnimationFrame para sincronizar las actualizaciones con el ciclo de pintado (paint cycle).

5. Cargas de JSON.parse de gran tamaño El procesamiento de archivos grandes bloquea el hilo principal (main thread). Esto causa input lag.

• Solución: Usa Web Workers para procesar los datos fuera del hilo principal.

6. Coincidencia de selectores CSS complejos Los selectores profundamente anidados o complejos ralentizan el recálculo de estilos.

• Solución: Usa Lighthouse para encontrar cambios de diseño (layout shifts) y simplifica tus selectores.

7. Fragmentos de bundle duplicados Los bundles grandes y no optimizados desperdician tiempo de transferencia.

• Solución: Usa webpack-bundle-analyzer para encontrar y eliminar código duplicado.

Cómo medir tu progreso:

• Abre Chrome DevTools.
• Ve a la pestaña Performance.
• Graba una sesión de 5 segundos.
• Busca tareas de más de 50 ms en el gráfico de llamas (flame chart) de Main.
• Aplica una solución y compara los tiempos de Rendering y Painting.

Corregir estas áreas mejora tus Core Web Vitals, específicamente el Largest Contentful Paint y el Interaction to Next Paint.

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