Estoy creando una aplicación de chat y el rendimiento es lento cuando se envían muchos mensajes a la vez. Los mensajes aparecen, pero la interfaz de usuario deja de responder durante un tiempo. Aquí hay una versión simplificada del código y ¿cómo puedo solucionarlo?
HTML:
<div class="message-notification" *ngFor="let newMessage of chatMessages"; trackBy: trackByMsgs> <custom-notification [incomingChat]="newMessage" (dismissedEvent)="onDismiss($event)" (closedEvent)="onNotifcationClose($event)"></custom-notification> </div>TS:
newChatMessages: any[]; constructor(private chatService: ChatService) {} ngOnInit() { this.chatService.chatMsg.subscribe((msg:any) => { if (msg) { this.activatePopup(msg); } } activatePopup(message) { if (message.msgId !== null && message.title !== null) { this.setTitle(message); //If popup is already open then do not display a duplicate popup for the same message let index = this.isPopupOpen(message); if (index === -1) { newChatMessages.push(message); }else { newChatMessages[index] = message; } } } trackByMsgs(index:number, msg:any) { return msg.msgId && msg.title; } isPopUpOpen(message){ let index = -1; if (this.newChatMessages){ index = this.newChatMessages.findIndex( msg => msg.id === message.id && msg.title === message.title); } return index; }Lo mejor en su caso es controlar la detección de cambios angulares manualmente utilizando la estrategia de detección de cambios OnPush . Debe usarlo con cuidado, porque cuando está activado, angular detectará los cambios solo si se activa el ciclo de vida onChanges o si la tubería asíncrona ha recibido un nuevo valor. También se aplica a todos los componentes secundarios.
Luego, deberá detectar los cambios manualmente inyectando ChangeDetectorRef en su componente y llamar al método detectChanges cada vez que desee aplicar los cambios de datos a su dom.
Lea este artículo para una mejor comprensión.
Otro artículo interesante para mejorar el rendimiento de tu aplicación angular https://medium.com/swlh/angular-performance-optimization-techniques-5b7ca0808f8b
El uso de trackBy ayuda a angular a memorizar los elementos cargados en ngFor y actualizar solo los modificados una vez en la detección de cambios. Pero su trackByMsgs devuelve un booleano que no es lo que debería devolver. Si ajusta su trackBy para devolver una clave única como msg.msgId o el índice del elemento, es posible que vea una diferencia.