Capítulo 7: Performance Panel

21 de enero de 2025 Por: Siempre Listo

rozeniteperformancefpsoptimizacion

Performance Panel

El plugin Performance monitorea métricas clave para identificar problemas de rendimiento.

Métricas Disponibles

FPS: Frames por segundo en tiempo real
JS Thread: Carga del hilo JavaScript
UI Thread: Carga del hilo de UI
Memory: Uso de memoria RAM
Renders: Conteo de re-renders por componente

Interfaz del Panel

┌─────────────────────────────────────┐
│ Performance                         │
├─────────────────────────────────────┤
│ FPS: 60 ████████████████████ 60/60  │
│ JS:  12% ███░░░░░░░░░░░░░░░░        │
│ UI:  8%  ██░░░░░░░░░░░░░░░░░        │
│ RAM: 145MB                          │
├─────────────────────────────────────┤
│ Re-renders (last 10s):              │
│ • ProductList: 15                   │
│ • CartButton: 8                     │
│ • Header: 2                         │
└─────────────────────────────────────┘

Configuración

import { PerformancePlugin } from '@rozenite/performance';

const perfConfig = {
  // Intervalo de muestreo
  sampleInterval: 500,

  // Umbral de FPS bajo
  fpsWarningThreshold: 45,

  // Trackear re-renders
  trackRenders: true,

  // Componentes a monitorear
  watchComponents: ['ProductList', 'CartButton'],
};

<RozeniteProvider
  plugins={[PerformancePlugin.configure(perfConfig)]}
>

Identificar Problemas

FPS Bajo

Animaciones pesadas
Listas largas sin virtualización
Cálculos en el hilo principal

Re-renders Excesivos

Props que cambian innecesariamente
Context sin memoización
Estados no optimizados

Ejercicio Práctico

Objetivo

Identificar un componente con bajo rendimiento.

Pasos

Crea un componente con muchos re-renders
Observa el panel Performance
Identifica el componente problemático
Optimiza con React.memo o useMemo

Ver solución

// Componente problemático
function SlowList({ items }) {
  // Cálculo pesado en cada render
  const processed = items.map(item => ({
    ...item,
    computed: expensiveComputation(item),
  }));

  return processed.map(item => <Item key={item.id} {...item} />);
}

// Componente optimizado
const OptimizedList = React.memo(function({ items }) {
  const processed = useMemo(() =>
    items.map(item => ({
      ...item,
      computed: expensiveComputation(item),
    })),
    [items]
  );

  return processed.map(item => <Item key={item.id} {...item} />);
});

Criterios de Éxito

Problema identificado en panel
Re-renders reducidos
FPS mejorado