How to get reproducible node-count in chrome developer tools timeline?

Question

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?

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

Answer 1

您可以按照此处所述从修复js中的内存泄漏开始，因此dom节点的数量也将减少。