Angularjs $destroy childHead to reduce memory leak possibly from ui-router

My app is using ui-router. I have noticed that memory keeps increasing when changing routes. I have checked the code for the usual stuff like event binding, destroy of elements etc. but still I get more that 50% of the initial memory when the app is first loaded. I suspect its ui-router but can't find any issues going through its code. Everything seems to be cleaned and removed properly.

The app starts at 50MB of initial memory and navigating to the next page and back adds 30MB to a total of 80MB and so on and so forth. (that's on chrome, in firefox its a lot worse)

Long story short I have gone through the $destroy method and in my tests navigating into the next page $destroy was executed 100 times.

By adding the following lines of code in the $destroy it gets called 300 times and also the leak is down from 50% increase to a 10%.

The change is trivial and from the cpu load times I measured it does not affect performance even if I have this loop down the $scope hierarchy:

$destroy: function() {
    // We can't destroy a scope that has been already destroyed.
    if (this.$$destroyed) return;

    //Adding this loop gets more $scopes destroyed!!! why?
    while (this.$$childHead) {
      this.$$childHead.$destroy();
    }

    var parent = this.$parent;

    this.$broadcast('$destroy');
    this.$$destroyed = true;

    ...

I am not sure why though this is happening, maybe some experts may shed some light and if there is potential issues into making that change in the $destroy. I've using angular 1.4.7

Thanks

Recommended topics

Hot tags