Angular 2, Javascript, Memory Usage and Garbage Collection

Question

I am at a total loss and left feeling like giving up on using Angular 2 in general for building a real world application due to problems surrounding memory usage.

I have followed all of the best coding practices like nulling all properties when no longer needed, removing all references to properties, emptying arrays etc, properly addressing closures etc etc etc etc...

Regardless of this, when testing some pretty basic functionality in Angular 2, i continue to run into ever increasing memory usage during runtime for ALL KINDS of basic manipulations of the DOM.

Just ONE example that use big chunks of memory during execution which never get garbage collected:

Animating the width of a div over time.

I have attempted to implement this kind of UI behavior in SEVERAL different ways, the most effective way having been to use an interval with requestAnimationFrame, and wrapping it all in Angular's zone.runOutsideOfAngular method as well.

Regardless, placing the following line inside of a loop uses an ENORMOUS amount of memory that is never garbage collected even after properly canceling the loop using cancelAnimationFrame, nulling properties used within the loop along with all references to the div and removing the div from the DOM.

this.renderer.setStyle(this.progressBar.elRef.nativeElement.querySelector('.progress-inner'), 'width', percentProgress+'%');

As i'm sure you can tell, this is a line taken from a method which modifies the width of progress bar. Again, note i have tried implementing a progress bar in SEVERAL different ways. Using CSS to animate instead of the method outlined above.

IN GENERAL THOUGH, it seems like no matter what i do — no matter what i try to implement, SO MANY actions that have ANYTHING to do with animation — even just things like scrolling seem to require an ever increasing amount of memory to execute that is never garbage collected inside of an Angular 2 application.

So in short, this post is not specific to intervals, or animating the width of a div. Almost any task inside of an Angular 2 application seems to use an enormous amount of memory that is never garbage collected.

Can anyone offer any guidance? Recommend a book on Memory usage and Javascript?

It truly has been incredibly discouraging to run into the amount of memory usage problems that i have been. Pushes me to want to give up on using Angular 2 all together.

Although this article is for Angular, but you can relate it with your application. Here is the Link. — The Hungry Dictator
– The Hungry Dictator, Commented May 30, 2017 at 3:51

Nate May · Accepted Answer · 2017-05-30 03:24:33Z

If you're using Observables then make sure that you unsubscribe() to them. don't just set them to null. If this turns out to be your issue, then take a look at smart vs presentational components. This is an angular2 paradigm the has the effect of garbage collecting for you after components are destroyed.

In the past I have pushed subscriptions into an array and unsubscribe onDestroy

ngOnInit(){
   this.subs.push(this.myObservable.subscribe(/*logic*/))
}

ngOnDestroy() {
  for (let sub = 0; sub < this.subs.length; sub++) {
    this.subs[sub].unsubscribe();
  }
}

Also consider using [ngStyle]="{'width': calculateWidth()}" to adjust the size of your element is that works for you. Just defined your calculateWidth() logic in the component and add transitions to your style sheet transition: width .4s cubic-bezier(.25, .8, .25, 1);

Try to avoid renderer, there are security issues. instead take the mindset of passing data to child components through the @Input() decorator. then use ngOnChanges or changeDetection: ChangeDetectionStrategy.OnPush to allow the component to rerender. Angular is fast like that and animations will still work between renderings

Collectives™ on Stack Overflow

Angular 2, Javascript, Memory Usage and Garbage Collection

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related