Angular + Chrome...are detached DOM nodes causing unbounded memory growth? #9748
Description
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