ESTRATEGIAS DE RENDIMIENTO EN FRONTEND

6 estrategias que mejoran drásticamente la velocidad y la experiencia de usuario:
  • Lazy Loading: Carga los componentes solo cuando el usuario los necesita. Menos peso inicial = página más rápida.
  • Code Splitting: Es la técnica de dividir tu bundle de JavaScript en múltiples archivos más pequeños (chunks) que se cargan bajo demanda en lugar de descargar todo el código de una sola vez.
  • useMemo: Cachea el resultado de una función costosa y solo la vuelve a ejecutar cuando cambian sus dependencias. Evita recalcular valores o re-renderizar componentes innecesariamente.
  • Debounce: Técnica que retarda la ejecución de una función hasta que haya pasado un tiempo determinado SIN que se vuelva a llamar. Solo se ejecuta una vez, después de que el usuario “deje de interactuar”.
  • Throttle: Limita la ejecución de una función a un máximo de veces por intervalo de tiempo (por ejemplo: máximo 1 vez cada 200ms). Aunque el evento se dispare 100 veces por segundo, la función solo se ejecutará 5 veces.
  • Virtual DOM Optimization: Reduce renders innecesarios.
Diferencia clave de Throttle con Debounce:
  • Debounce: Espera a que el usuario deje de interactuar (ej: búsqueda mientras escribe).
  • Throttle: Ejecuta la función regularmente aunque el evento siga ocurriendo (ej: scroll infinito).