Tu equipo tiene un dashboard con 50+ widgets que se actualizan en tiempo real. Los usuarios reportan que la app se congela al recibir datos del WebSocket. ¿Cómo lo solucionas?
Contexto
Estás en una fintech. El dashboard muestra precios de acciones, gráficas y alertas. El WebSocket envía ~200 mensajes/segundo. El equipo de producto no quiere reducir la frecuencia de actualización.
Respuesta modelo
Primero mediría con Angular DevTools para identificar qué widgets causan más ciclos de change detection. Luego: 1) Todos los componentes en OnPush. 2) Agrupar mensajes del WebSocket con bufferTime(100ms) en RxJS para reducir actualizaciones a 10/segundo. 3) Usar signals para estado local de cada widget. 4) @defer para widgets fuera del viewport. 5) Considerar runOutsideAngular para el WebSocket y notificar a Angular solo cuando hay datos relevantes para la vista.
Claves
- Medir primero con DevTools, no optimizar a ciegas.
- bufferTime + OnPush reduce drásticamente los ciclos.
- runOutsideAngular para operaciones que no afectan la vista.