I am trying to optimize a very large single-page application created using AngularJS. I suspect there are memory leaks and I'm trying to track them using the Chrome developer tools. The first thing I am trying to do is to see if garbage collection can remove some unused DOM nodes. My problem right now is that I cannot get reproducible output on the Dev Tools timeline. Each time I perform the same set of steps, I get a different number of common nodes - both at the beginning of the sequence and at the end. I would expect the result to be the same as long as the same interactions happen. Below are some screenshots of several tests that I have done.
The only variables that I can think of will differ from test to test: elapsed time and the exact position of the mouse cursor on the interface. There are no mouseover events that could trigger the creation or deletion of new DOM elements.
Does anyone have any tips on how to get reproducible results? Or are my expectations wrong?
NOTE. Dropping on the graph at the end of each example is forced garbage collection.
source
share