0

Currently I'm into adding AngularJS to a site that cannot be fully converted in one shot but already has single page app functionality through jQuery/Ajax.

To get both worlds working together I've got a main controller that knows the current page controller and calls $destroy() on it when the ajax mechanism was triggered for page change. All the containing scopes get cleared up well as they should, the new html comes into the page and is then being compiled by that main controller to activate all the new angular stuff which works perfectly well, too.

The only problem there is, that on every page change, the whole DOM seems to stick in the memory and is not released into garbage collection, resulting in +20 to +35 MB of RAM consumption on each page navigation.

http://i.kw.cx/ip/6195134616104642286.png

As you can see on the image of the snapshot there is an tremendous amount of detached DOM elements that all seem to be connected to jQuery / the jQuery cache.

The problem seems similar to the one described here: How to catch memory leaks in an Angular application?

So I checked the usage of jQuery and AngularJS is using the loaded full version of jQuery, not the jqLite version, since I'm able to use all available plugins and methods on $element received in the controller - which I exposed to the window-object to observe that.

Thus, as the website and AngularJS are using the same jQuery version, there should be no problem with 2 disjunked internal caches each holding DOM references on their own and probably mixing things up. But I have to add that the page still is running on the quite old jQuery v1.7.1 since it cannot be updated at the moment.

As I've already removed everything except simple HTML and the Angular directives I'm really running out of ideas where to look next so any ideas, hints or clues are very welcome!

Thanks in advance, I'm already strugling with it for more than a day...

Artimus
  • 138
  • 6
  • First, avoid using jQuery's .data and event methods. And, if you have to use them, make sure you're removing the elements using jQuery methods too, otherwise the data created by data and event binding methods will not be cleaned up. This is usually done using the `$destroy` scope event. – Kevin B Sep 16 '15 at 15:44
  • The pure jQuery stuff must be ok, since before adding Angular there was no leak but single-page functionality, too. What I see are many angular-based elements that stick with jQuery as if $destroy would not release the angular speciffic pointers to them. Detached elements are often of type "comment" with content "ng-if..." and so on. It seems like the whole DOM with angular bindings is not being released. Is there a way to tell angular to fully loose grip of a part of the DOM? Everything I can find is calling $destroy() on the scope and then .remove() or .empty() the element. – Artimus Sep 18 '15 at 07:24

0 Answers0