Geek Answers Handbook

Understanding AngularJS Memory Management and Google Chrome

I was wondering why - even in a simple SPA application with AngularJS, there seems to be a DOM leak. I may be misinterpreting this, but as I look at it, the highlighted DOM elements will not be released properly. The playback procedure is as follows:

  • go to the screenshot page with a simple AngularJS application
  • enable timeline recording in developer tools
  • forced garbage collection
  • add an item and then delete it
  • forced garbage collection
  • repeat the last two steps at least 3 times

In the screenshot you can see that after adding an element and deleting it, it seems that there are two more DOM elements after garbage collection (transition from 502 to 504 DOM elements).

I was hoping that someone could shed light on this before I delve into the study of what is happening. The reason for this test was the more complex AngularJS SPA, which I am working on, and which also seems to be losing memory.

simple angularjs memory consumption timeline

+6
source share
1 answer

Now I am doing this. I noticed a couple of things: 1) look at any use of $ (window) .fn () - where fn is any of the functions on the window object; if you do this more than once, you add several event handlers to the global object, which causes a memory leak

2) $ rootScope. $ watch () - similarly, if you do this more than once (say, when loading the directive), you add several handlers to the global object

3) In my tests (where I go back and forth between two pages) it seems that chrome consumes a lot of memory (in my case, almost 1 GB) before garbage collection starts. Maybe when you hit the “garbage” collection “chrome doesn't actually make a GC? Or is it a GC for javacsript but not for dom elements?

4) If you add an event handler to the dom element and then remove it from dom, the handlers will never get GC'ed.

+1
source

More articles:


All Articles