Tengo un componente angular en el que incluí un svg. Los grupos se construyen dinámicamente con un ngFor y contienen otra aplicación (por ejemplo , app-item-l y app-item-s en los que paso ancho y alto). Esta configuración funciona muy bien, pero tan pronto como agrego algunos estilos CSS animados a los elementos individuales, la animación parece causar una pérdida de memoria y no puedo averiguar por qué o cómo resolverlo. Si ejecuto la aplicación con css simple (no animado) no hay ningún problema.

También puede ser importante decir que la aplicación se ejecuta de forma continua. Entonces, cuando lo mantengo funcionando durante la noche, la RAM está al 98% a la mañana siguiente e incluso si navego a una ruta diferente, el GC no limpia la RAM.

Aquí hay un código simplificado de mi aplicación. Cualquier sugerencia sobre cómo controlar esto es muy apreciada.

aplicación.html

 <svg [attr.viewBox]="viewBoxValue" preserveAspectRatio="xMinYMin meet" class="animated"> <g *ngFor="let itemL of itemsLarge" app-item-l [width]="largeWidth" [height]="largeHeight" [attr.transform]="itemL.transform" [class]="itemL.display" /> <g *ngFor="let itemS of itemsSmall" app-item-s [width]="smallWidth" [height]="smallHeight" [attr.transform]="itemS.transform" [class]="itemS.display" /> </svg>

Extracto de app.ts

 export class AppComponent implements OnInit { ... x = 0; y = 0; width = 1000; height = 600; viewBoxValue = `${this.x} ${this.y} ${this.width} ${this.height}`; largeWidth = 150; largeHeight = 100; smallWidth = 80; smallHeight = 50; itemsLarge = [ {name: "Item Large One", display: "nok", transform: "translate(10, 10)"}, {name: "Item Large Two", display: "ok", transform: "translate(10, 200)"} ]; let itemsSmall = [ {name: "Item Small One", display: "nok", transform: "translate(100, 10)"}, {name: "Item Small Two", display: "ok", transform: "translate(100, 200)"} ] ngOnInit(): void {} *Some other logic - not important for this question* }

Extracto de css.ts aplicado que funciona

 .ok { fill: #9ca810; } .nok { fill: #ff0000; }

Pero esto crea una pérdida de memoria: ¿POR QUÉ?

 .ok { fill: #9ca810; } .nok { fill: #ff0000; animation: alert 1s linear infinite; } @keyframes alert { 0% {fill: #bf0313; } 50% {fill: #ff4a0d; } 100% {fill: #bf0313; } }