RendimientoPróximamente

Performance Showcase

Muchas veces solo miramos el rendimiento después de que el problema ya está ocurriendo. Eso es muy común en el desarrollo de software, pero hay mucho que se puede evitar si se practica a diario y se ejecuta de la mejor manera posible. En esta demo vamos a poner números delante de cada optimización: cien mil filas renderizando sin trabarse mediante virtualización, code splitting reduciendo el bundle inicial, useMemo/useCallback usados para evitar el re-render del contenido, y una tarea pesada corriendo en un Web Worker sin bloquear el hilo principal. FPS, tiempo de carga de pantalla, cantidad de renders y tamaño del bundle quedan visibles todo el tiempo.

Performance Virtualización Code Splitting Web Workers Core Web Vitals

Tecnologías

  • TanStack Virtual
  • next/dynamic
  • useMemo/useCallback
  • Web Workers
  • React DevTools Profiler API

Arquitectura

  • Virtualización de listas grandes (windowing)
  • Code splitting por ruta
  • Web Workers para tareas pesadas fuera del hilo principal
  • Métricas de FPS/render/bundle expuestas en la UI

Conceptos

  • Virtualización de listas (windowing)
  • División de bundle por ruta
  • Procesamiento fuera del hilo principal
  • Core Web Vitals (LCP | FID | CLS)

Área de demostración

La demostración interactiva de esta funcionalidad estará disponible próximamente.

Próximamente

La demostración interactiva de Performance Showcase está en desarrollo. La arquitectura y los detalles técnicos ya están documentados arriba.

Seguir en GitHub
Se añaden nuevas demos regularmente