Angular + Chrome...are detached DOM nodes causing unbounded memory growth?

[michelob]

Hi

I have read though most of these issues: https://github.com/angular/angular.js/issues?q=detached+dom

They seem to boil down to the discussion at:
#4864
which seems to point to this as the culprit:
https://code.google.com/p/v8/issues/detail?id=2073

However, I can't seem to come to any sort of conclusion whether there is an angular issue or angular simply will not work for a large app in Chrome. The angular issues keep getting closed. (See most of those 'q=detached+dom' issues. they are closed.)

In my app, I have a large number of detached DOM elements. This occurs on very first visit with no page interaction at all. Just visit the app. Open dev tools. Take a snapshot. Lots of detached elements. And memory grows and grows as you use the app.

Is this definitely related to:
https://code.google.com/p/v8/issues/detail?id=2073#c35

Or is there something else going on inside Angular?

What is the angular team's thoughts on this?

One can reproduce both Memory issues and Detached DOM simply using Chrome visiting angularjs.org.

Symptom 1: Watch memory grow and grow...Open Activity Monitor. Search for Chrome. Open Chrome and visit angularjs.org. Select api docs. This will show the current docs for 1.3.x. Now drop down and switch to 1.2.x. Now click back. Now click forward. Going back and forth. You will see in Activity Monitor memory grows for Chrome quickly to 400mb+. (For safari, it retains a bit above 100mb.) (My app in Chrome goes to 800mb very quickly.)

Video showing Activity Monitor, comparing Safari vs Chrome: http://www.youtube.com/watch?v=eihKavtp1EQ

Environment:
Yosemite 10.10
Chrome 39.0.2171.27 beta (64-bit)
Safari 8.0 (10600.1.25)
(My app is using Angular 1.2.24, no Jquery)

Symptom 2: See detached DOM elements appear on first app load...Open Chrome. Do not open dev tools. Visit angularjs.org, do no clicks/actions. Open dev tools. Take Heap Snapshot. You get the below showing detached nodes:

Is this expected?

-m

[michelob]

Here are some additional issues filed and some history.

Closed: #4864 (comment) - docs.angularjs.org: DOM Nodes Leaking
... believed to be Chrome dev tools issue. Closed. Later comment suggests a fix for animate. Follow up question unanswered.

Closed: #5270 (comment) - Remove event listeners - memory leak
... suggests the wrong reference is passed to removeEventListenerFn. Believed to be dev tools issue. Closed. Indicating no issue. Points to below associated pull request #5281.

Closed: #5281 (comment) - fix: properly remove event listeners for memory leak prevention
... Not merged for above. Closed. Indicating no issue. Follow up question unanswered.

Closed: #6794 - Major Memory Leak in Directives when using '&' binding
... closed with commit to clean up more on scope $destroy 3e14e4a. Resolution...these 2 Chrome issues were/are the potential culprits:

https://code.google.com/p/v8/issues/detail?id=2073
https://code.google.com/p/chromium/issues/detail?id=304689

[Dev63]

I agree. I see similar behavior on the simplest of apps, and even with just the simple sample code from AngularJS UI Bootstrap. If it is not endemic to AngularJS, is there some simple best practice that is being left out of all the examples? If so, can someone please provide a clear set of how/what to clean up when? Perhaps this is obvious to experts, so no one ever bothers to explain it. I hope that's the case...

[j-c-t]

Possibly also involved in issue documented at angular-ui/ui-router#545.

[michelob]

Looks like the blocker for this: https://code.google.com/p/v8/issues/detail?id=2073

Is getting fixed: https://code.google.com/p/v8/issues/detail?id=3629#c3

If indeed 2073 is the issue.

[astalker]

2073 was fixed on Jan 19 and 3629 fixed on February 5. I'm not sure how this affects this issue though and as far as I can tell I'm experiencing the same issue in Canary and Chrome 41

[gamebox]

Still experiencing this issue in Chrome 45 on Mac OS X. Navigation of our internal app will result in a doubling of memory usage and DOM nodes in 45 seconds. After navigation back and forth between two states about 25 times and the app will just crash. Might be ui-router, but discussions there lead me to believe this is an angular issue.

[kirtikachouhan]

+1