4

I am trying to optimize a very large single page app, built using AngularJS. I suspect there are some memory leaks, and I am trying to track them down using Chrome's Developer Tools. The first thing I am trying to do is see if garbage collection is not able to remove some unused DOM nodes. My problem right now is that I can't seem to get a reproducible output in the Timeline of the Dev Tools. Each time I run through the same set of steps, I get a different number of total nodes - both at the start of the sequence and the end. I would expect that the result would be the same as long as the same interactions are occurring. Below are some screen shots of several tests I have done.

The only variables I can think of that would differ from test to test are the time elapsed, and the exact position of the mouse cursor on the interface. There aren't any mouseover events that would trigger new DOM elements to be created or deleted.

Does anyone have any tips on how to get reproducible results? Or, are my expectations incorrect?

Test 1

Test 2

Test 3

NOTE: The drop-off in the graph towards the end of each example is a forced garbage collection.

Jeff Fohl
  • 2,047
  • 2
  • 23
  • 26

1 Answers1

1

You can start from fixing memory leaks in your js as described here As a result the number of dom nodes will go down too.

Community
  • 1
  • 1
loislo
  • 14,025
  • 1
  • 28
  • 24
  • Thanks @loislo, but my question right now is: why is the number of nodes not always the same? – Jeff Fohl Apr 08 '15 at 16:33
  • it depends on GC runs. There is a button like waste basket which allows to force GC manually. The recording and plain heap profiler does GC automatically so you don't need to do that manually. – loislo Apr 08 '15 at 16:42
  • Yep, I did a forced GC on each test. In the graphs, you can see where this happens. However, I am still mystified as to why the node count would be different each time. For example, the beginning node count is different on each run through. I did a hard refresh on the page before each test. Wouldn't the starting node count be the same? – Jeff Fohl Apr 08 '15 at 16:46
  • I just noticed that the "Documents" count is different for each of my tests. This is perplexing, since I am not using any iframes in this app, so I am not sure where those numbers are coming from. Perhaps this is being caused by some browser plugins... – Jeff Fohl Apr 08 '15 at 16:52
  • 1
    There may be a few reasons. An extension may do its work in the page. Some timer dependent code may work in the page. Some objects from v8 heap may stay in memory because they are retained by a chain of weak pointers. v8 may keep in memory an optimized version of a function which has a pointer to an object which retains a dom node. AngularJS may do its part of the problem with juggling 26k nodes of your app, etc. As a result you see very flaky numbers and in any case without heap snapshot you can't say why it is so high. – loislo Apr 08 '15 at 16:57
  • You can try to run chrome with a fresh user profile without extensions, other tabs, etc. And actually it is the best way to get a reproducible results. – loislo Apr 08 '15 at 17:00
  • Thanks for the extensive comments loislo. – Jeff Fohl Apr 08 '15 at 17:04