Angular.js memory leaks when I should start to worry

Question

So, I have this rather large application built on angular, many nested states, many directives, data tables, etc.

Recently, we decided to go to a full single page, instead of having several small separate sections of applications (for example, articles, people, the toolbar were small one-page applications earlier), so I started working with performance a bit more. On the other hand, in Chrome you did not notice anything, but on the other hand, I think that over time it becomes slower.

So, I started with three snapshot labels to see what was happening. But I'm not quite sure what to do about it.

PICTURE

• image size doubles the size of each image (1st 15mb, 2nd 67mb, 3rd 120mb), does that mean anything?
• there are a lot of red dom, 4000 red divs for example

Now I feel that these red divs, spans and snaps are basically my mistake, I am doing some unusual things to render these data tables using this directive that I did, and also feel that part of the heap objects are the result of that dom elements are not removed properly.

This is what the table directive essentially does

var rows = '<div class="row" ng-repeat="item in items">'; _.each(columns, function(column) { // pass cell as a string from $templateCache, instead of having <table-cell type="column.type"> which loaded correct templateUrl depending on what was passed via type attr var cellTemplate = $templateCache.get(column.type); rows += '<div class="column">' + cellTemplate + '</div>'; }); rows += '</div>'; // el is from directive link function el.html(rows); $compile(el.contents())(scope); 

The reason I do this in general is that when I tried to use nested ng-repeat for rows and columns and the <table-cell> directive for cells, it was too long for rendering, even with about 6 columns and 50 lines.

So, I think this is due to the fact that none of these divs inside this table are deleted properly, so they constantly accumulate every time this table loads.

Now, even if I am dealing with this freestanding tree. What about everything else, as I know what I should try to handle and what is usually for angular and does not affect performance

// change the table directive to plunker http://plnkr.co/edit/1fZi6mVn2jBIGF0Q2a40?p=preview

Answer 1

The leak was actually caused by another, completely harmless directive, which was used in the table header and did nothing but create an array of "sorting elements", and then printed it using ng-repeat .. and that it wasn’t caused by anything worse . what I did inside this directive, but its replace: true .. God knows why, I will try to reproduce it on the plunker and report on github.

Since it was almost impossible to find which part of the application was calling it, just by looking at the heap report, I continued and deleted all the other parts of the application, but the one that I suspected was calling it, then I found out it wasn’t, so I continued and read on to everyone else.

As soon as I found out the real problem directive, I did the same thing, continued to delete parts of my code, while there was nothing inside.

Then it was obvious that this was one of the options of the directive, after which I found that the replacement caused it.

Answer 2

This directive does not miss anything. I forked your plnkr, added even more objects to make it visible if there was a leak, and added a button that reloads the table. He waits for one second, and then fills it again.

Nodes are deleted and recreated. Leak Detection Actions:

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

Performing this exactly 3 times (so that you have the same memory state), you will see that the same memory is used:

You can check out branched plnkr

After that, I can only try to guess what might be the problem. I will give you a couple of suggestions based on what I found here .

• Check the directives, they are usually the cause. frickingTable does not seem to do anything harmful in its own, but other customs may, even if they are not yours, shit just happen.
• If the table is filled with some kind of “poll”, the object is empty before reassignment. So, if you see forked plnkr, you will see that I first set items to null and then assigned. It should be like that. In plnkr, I did this to make it noticeable (that the table is re-populated), however I found that browsers tend to save links if you don't clear objects / arrays. I clear arrays using .length = 0 and objects with null , which makes all possible references to this object ready for GCed and does not cause any leaks. That sounds silly, but I saw it in Angular as well as in Backbone, so it should be a browser.

I cannot think of anything else without seeing any code. I hope this points you in the right direction, leaks are annoying, to say the least.