Reducing memory utilization of Angular app

Question

I've created a simple Angular app with one Form and a Table (PrimeNg DataTable).

Just to get a substantial difference in memory utilization with initial and final readings, I performed multiple Form Post calls (300 times) and navigated Table till page 20 with 1000 rows per page also sorting table 5 times with all columns and took the Heap snapshots with initial and final states (with all add-ons disabled in private/incognito tabs and with angular-cli app running in dev env).

In chrome, the heap memory size increased from 55 MB to 146 MB (91 MB gain)

In Chrome, the heap memory size increased from 23.16 MB to 137.1 MB (113.95 MB gain)

I am unsubscribing from all the subscriptions when my component destroys (this will have no effect as this is a single component) also I've set changeDetectionStrategy to onPush.

app.component.html:



  
    
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
    
    
      {{taskPostCount}}
    
  
  {{addTaskResponse | json}}

app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AppService, TimeFromNow],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  // Properties declarations
  private unsubscribe: Subject = new Subject();

  constructor(private appService: AppService, private timeFromNow: TimeFromNow, private ref: ChangeDetectorRef, fb: FormBuilder) {
    this.taskForm = fb.group({
      'index': ['', Validators.compose([])],
      'name': ['', Validators.compose([])],
      'userId': ['', Validators.compose([])],
      'mobile': ['', Validators.compose([])],
      'taskDate': ['', Validators.compose([])],
    });
    this.index = this.taskForm.controls['index'];
    this.name = this.taskForm.controls['name'];
    this.userId = this.taskForm.controls['userId'];
    this.mobile = this.taskForm.controls['mobile'];
    this.taskDate = this.taskForm.controls['taskDate'];
    this.setTableSearchConfig();
  }

  ngOnInit() {
    this.addBulkTasksOnLoad();
  }

  ngOnDestroy() {
    this.unsubscribe.next(true);
    this.unsubscribe.complete();
    this.unsubscribe.unsubscribe();
  }

  addBulkTasksOnLoad() {
    this.busy = this.appService.addTaskOnLoad().subscribe((res: any) => {
      this.loadTable();
    }, (err: any) => {
    });
  }

  addTask(taskForm: any) {
    this.taskPostCount++;
    this.appService.addTask(taskForm).takeUntil(this.unsubscribe).subscribe((res: any) => {
      this.addTaskResponse = res;
    },
      err => {
        this.addTaskResponse = err;
      });
  }

  loadTable(paginateEvent?: PaginateEvent, sortEvent?: SortEvent, filterEvent?: FilterEvent) {
    this.appService.getTable(this.tableSearchConfig).takeUntil(this.unsubscribe).subscribe((res: any) => {
      for (const history of res.data) {
        history.updatedAt = this.timeFromNow.transform(history.updatedAt);
      }
      this.table = res.data;
      this.setTableSearchConfig(paginateEvent, sortEvent, filterEvent, this.tableSearchConfig.pageNumberToRequest, res.totalRecords);
      this.ref.detectChanges();
    });
  }

  .
  .
  .
  .
}

Is it a case of memory leak and if yes what exactly I am doing wrong or it is normal behavior to have this increase in memory after heavy usage of the app? The app's frame rate also dropped at the end quite significantly.

Reducing memory utilization of Angular app

Answers (1)

Related Questions