Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

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

Closed
@michelob

Description

@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:

screen shot 2014-10-22 at 17 05 23

Is this expected?

-m

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions