Angular.js Memory Leaks, When Should I Start Worrying

So I have this rather large application built on angular, alot of nested states, alot of directives, data tables and stuff. We recently decided to switch to full single page, inste

Solution 1:

The leak was actually caused by another, completely harmless looking directive that was used in the header of the table and was doing nothing but creating array of "sort items" and then printing it using ng-repeat.. and what's worse it was not caused by anything I did inside that directive but by itsreplace: true.. god knows why, I shall try and reproduce it on plunker and report on github.

Since it was almost impossible to find which part of the app was causing it just by looking at the heap report, I went on and deleted all other parts of the app but the one I suspected was causing it, then I found out it wasn't that one, so I went on and kept readding all others.

Once I found out the real problematic directive, I did the same, kept deleting parts of its code until there was literally nothing inside.

Then it was obvious it was one of directive's options, then I found out replace was causing it.

Solution 2:

That directive isn't leaking anything. I forked your plnkr, added way more objects to make it noticeable if that were leaking, and added a button which reloads the table. It waits one second and then populates it again.

Nodes are eliminated and recreated. The steps to try to locate the leaks are:

• Start recording
• Wait 2 seconds
• Press the button
• Wait 10 seconds
• Stop recording

Doing that exactly 3 times (so you have the same state of memory), you'll see that the same memory is being used:

You can check the forked plnkr

After this, I can only try to guess what could be the issue. I'm going to give you a couple of suggestions based on what I discovered here.

• Check directives, they are usually the cause. The frickingTable doesn't seem to be doing anything harmful in it's own but other customs ones could, even if they're not yours, shit just happens.
• If the table is being populated with some sort of "polling", empty the object before reassigning. So, if you see the forked plnkr, you'll see that I first put items to null and then assign. That should be the way. In the plnkr I did it for it to be noticeable (that the table is being re-populated) however, I've found that browsers tend to keep references somehow if you don't clean objects/arrays. I clean arrays with .length = 0 and objects with null, that makes all possible references to that object ready to be GCed and won't cause any leaks. This sounds silly, but I've seen it in Angular and also in Backbone so it has to be a browser thing.

I can't really think of anything else without seeing any more code. Hope this points to you in the right direction, leaks are annoying to say the least.