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
On Thursday, September 4, 2014, Karel-Jan Van Haute <karel...@gmail.com> wrote: > Do you guys have a solution yet? Because I'm having some serious detached > dom tree. > > On Tuesday, October 15, 2013 12:11:08 AM UTC+2, Ryan Zec wrote: >> >> 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: >> >> >> <https://lh5.googleusercontent.com/-6WLne1gD-x8/UlxrBiBexRI/AAAAAAAAAFo/Q836OwC78-4/s1600/Screen+Shot+2013-10-14+at+6.05.49+PM.png> >> >> >> I then load the first 20 directive's documentation and take a profile and >> now these are the detached DOM trees: >> >> >> <https://lh5.googleusercontent.com/-SA2BB6rZcAM/UlxrHSZ7sxI/AAAAAAAAAFw/j81ZiaAI0So/s1600/Screen+Shot+2013-10-14+at+6.05.58+PM.png> >> >> >> I then load the next 25 directive's documentation and take a profile and >> now these are the detached DOM trees: >> >> >> <https://lh6.googleusercontent.com/-a8n6IJ_cSHI/UlxrNkJf6MI/AAAAAAAAAF4/1rxKn2z9n58/s1600/Screen+Shot+2013-10-14+at+6.06.10+PM.png> >> >> >> 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 >> > -- > 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+unsubscr...@googlegroups.com > <javascript:_e(%7B%7D,'cvml','angular%2bunsubscr...@googlegroups.com');>. > To post to this group, send email to angular@googlegroups.com > <javascript:_e(%7B%7D,'cvml','angular@googlegroups.com');>. > Visit this group at http://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- 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+unsubscr...@googlegroups.com. To post to this group, send email to angular@googlegroups.com. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
