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

[enjoiful]

Using Chrome 45 and Angular 1.4.7, my app experiences severe node leaking. Signifiant node leaks occur when changing between states, even when both states have little to no HTML.

After about 15 minutes of protractor tests, OSX activity monitor shows Chrome as using 1.5GB of memory usage. Chrome dev tools shows >600,000 nodes.

[frfancha]

@gamebox @enjoiful
Do you observe the same problem in Firefox (if possible Firefox 38 ESR)? This would be useful for me to know it if you could take the time to test it.
Thanks!

[gc23]

@frfancha Firefox has similar (a bit less in size) memory leak. However, tested it on Edge and the leak is significantly less (1MB opposed to 30MB on chrome) than in the other browsers but still there. Maybe edge handles memory better these days but still I see "disconnected nodes" (detached DOM elements) which are pretty high on the DOM hierarchy. This makes me think that it could potentially be an issue with ui-router and state changes?

[IRyabov-HORIS]

+1

[geekchow]

+1

[sapanparikh18]

+1

[Narretz]

Please don't leave +1 without adding to the discussion. As far as I can tell, we are still missing a reproduction of the issue, and there are also strong signs that this is caused by ui-router instead of angular core.

[gkalpak]

I can't reproduce the memory leak (on Chrome 53/Windows 10). (Also note that https://code.google.com/p/v8/issues/detail?id=2073 has been fixed.)

I'm going to close this, but feel free to re-open if you still see the problem. I that case, it would be also useful to determine if the issue is related to any external libraries (e.g. ui-router).