Concerns About Detached DOM Trees And AngularJS

[Ryan Zec]

So I have been building this AngularJS application for a few months now and I have been doing some performance testing and there is one thing of concern that I really can't pin-point the cause of and that is a number of Detached DOM Trees that I am seeing.

Now my application in using jQuery 1.x with Angular 1.2 rc2 (I am using jQuery as I need certain functionality, mostly selector based querying, that jgLite does not support).

Right now the application is not that complex and I am already seeing 12 Detached DOM trees (totaling over 300 entries and 30 objects in all the tress).  Now when I go from page to page back and forth (the app only has 2 pages right now), those number do not change (the retained size does change but only very slightly) which is good however this application is going to get a lot more complex (it is slowly going to replace an application with 100+ unique pages not to mention all new functionality with be added here too) so I have concern on whether or not this is going to become an issue.  This application is also designed to be used for several hours during the day and it is a single page application so DOM and memory leaks are more important to catch and kill.

Now the angular documentation is the best angular SPA I know of so I loaded that up and the results are not very promising.  I take a profile after the initial page loaded and these are the detached DOM trees:

I then load the first 20 directive's documentation and take a profile and now these are the detached DOM trees:

I then load the next 25 directive's documentation and take a profile and now these are the detached DOM trees:

I tried loading all the directive's documentation however when I ran the profiler it crashed (maybe because of the amount o data it had).

Now these number scare me a little.  Now some of this from what I can tell is from DISQUS however not all of is.  A number of these items reference what I assume it a variable called cache in either the angular object or the jgLite object.  In my application using jQuery, it references the same cache variable but it is in the jQuery object instead.

Is there currently an issue with AngularJS/jgLite/jQuery leaking DOM trees and is this some I should be really be concerned about?

Thanks,

Ryan Zec

[Ryan Zec]

Another example of an AngularJS application with lots of detached DOM trees

http://www.plnkr.co/

This applications using AngularJS.  If you go to this site and profile it in chrome and then click on the Most Starred, Recent, Trending, and Most Viewed links and then profile it again, the number of detached DOM tree increases a little and the new detached DOM trees have a large number of entries in them.

If this was solely a jQuery issue I would expect these detached DOM trees to show up for code only using jQuery however the plugins I have tested don't show this level of detached DOM trees (one of them had 2 detached DOM trees with a total of 5 entries) so I have to assume it has to be something do to with AngualrJS and jQuery/jgLite.

[Ryan Swart]

I'm also suffering from detached DOM trees, and object properties that cling on to them. I'm not manually manipulating the DOM, just using Jquery, ng-repeat and a couple of ng-shows and hides

 
I'm wondering if it hasn't got something to do with Jquery's data-cache

[Stephen Kawaguchi]

Have either of you had any luck tracking down the source of the problem? My setup is more complex where the culprit could be a number of things (using jQuery, hammer.js, bindonce, custom directives), but I'm hoping that your experience could help narrow it down a bit. Any help is much appreciated!

[Kai Groner]

Some of this is to be expected.  Any directive that uses transclusion, will have a copy of those elements ready to be cloned and attached as needed.  That's any ng-if, ng-repeat (1 copy, not n), ng-switch, ng-include (I think) to name a few.

Figuring out if some of these are actually leaks will require some accounting to determine where the markup is being compiled from.  I don't know if there are tools that can help with this, or if you have to instrument the $compile service by hand.

Kai

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.

For more options, visit https://groups.google.com/d/optout.

[ra...@wealthspectrum.com]

Hi All;

I also am facing similar issue.  I have used jquery libraries for charts with angular.  My Application is single page application with multiple view using slide menu.  One thing i noticed is as follow:

1)  When page is changed it doesn't free memory.  Even i have tried implimenting destroy method and cleaning up controllers object lying in $scope.

2)  When changing data in same page  (using buttons),  it does free-up the memory.  I even have tried one clear button to clean object lying in $scope,  it does free-up the memory.  But when i go to another page,  it does not free-up memory used by the object even after cleaning controllers object on destroy method.

Is there any solution to this??

[Karel-Jan Van Haute]

Do you guys have a solution yet? Because I'm having some serious detached dom tree.

[Stephen Kawaguchi]

The culprits for me were:

1. Non-$scope variable references to DOM elements not being set to null on $destroy in directives

2. Hammer.js event listeners not being cleared correctly (you need to pass the bound function when removing the listener, which wasn't clear in the docs)

3. Console.logs with references to DOM elements - remove any console.log statements when hunting memory leaks

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/Kgh-XMwfMrQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.