Angularjs memory consumption issue

Question

Recently, I had the opportunity to create a new web application and think about trying Angular to get a good idea about this. So yes, I'm pretty new to this structure.

Understanding the nuances of the structure, it was surprisingly easy to work with. Everything that was in my experience was just great, until users began to report the full activity of the application.

The application is quite simple - it has 2 screens. One that shows a list of deals, and another, where users can add / edit deal information, this second page is a simple form, expecting the user to enter deal information. It looks like this:

Highlighted sections are displayed using ng-repeat . The list of retailers has about 530 entries, while the list of brands has about 400 entries.

After a little profiling, I realized that visiting this second form screen will continue to increase browser memory consumption. The first screen has no such effect. I simply switched between the first screen and the second form screen and found that every time this screen loads, the memory consumption will increase by 50-75 MB. In the end, the browser just freezes. Here's what the memory profile looks like:

As you can see, consumption continues to grow, and there are no signs of any GC! Each surge in the node and memory graph corresponds to a visit to the second screen based on the form.

Now I have already checked many problems around Angular and memory consumption, but each of them mentions that $scope for any of the views will be deleted when a new view is loaded. The DOM node count, of course, does not point to me: /

I also stumbled upon 2 important points related to using ng-repeat :

• Avoid calling any function in the ng-repeat directive.
• Do not use two-way binding using ng-model in the ng-repeat directive.

I avoided both of them in the second screen, and yet memory consumption goes through the roof.

My question may seem like another wrt angular memory related question, but I really tried to get some sort of closure of this and didn't find it.

I would really appreciate any help with this, since my decision to advance using Angular for the rest of the portal depends on the solution to this problem.

Thanks for reading!

Update 1

Based on an Ilan suggestion, let me add that I use 2 plugins to render a drop down list and implement a date picker.

In the drop-down list, I use Bootstrap-select and to select a date I use Bootstrap-datepicker .

For bootstrap-select to work, I had to write a custom directive that activated the translation in the $last ng-repeat event. It looks something like this:

 .directive('onFinishRender', function($timeout) { return { restrict : 'A', link : function(scope, element, attr) { if (scope.$last === true) { $timeout(function() { scope.$emit('ngRepeatFinished'); }); } } }; }); 

Then in the controller, I rely on this event to trigger a render for the dropdown plugin:

  $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) { $('#retailer').selectpicker('render'); }); 

For bootstrap-datepicker, I don't need to do such a complicated thing, since I only need to wrap the date input field using JS.

Update 2

After disabling plugins, memory consumption drops dramatically. However, the leakage problem still persists. Previously, whenever a form view loaded, the memory would increase by 50-60 MB. After turning off the plugins, it reaches 25-35 MB. But, as you can see below, memory consumption continues to accumulate.

Answer 1

I recently spent nights and days finding similar memory leaks like yours. This is not a direct answer to your question. You will need to do some research, but I can give you some pointers for leak detection.

• Do not use any other plugin in your Chrome browser other than the developer toolbar when debugging a leak.
• The timeline is good to understand that there is a leak, but to see the leak, use the profiler tab. It launches the GC every time you take a heap snapshot and gives you a hint if you have improved or not.
• If you see a memory leak in MB than in DOMElements. With the leak size that you talked about, I can say that your whole document hangs as a separate dom element due to the fact that one or two components on your page are not freed and still hang as a attached dom.
• Remove all items from your second page and make this switch to find out if memory is expanding. If so, there is a leak on the first page; otherwise, do the same with the second page.
• Once you find which page is leaking, remove all components from this page and add them one by one to see when the leak is returning.

Hope these steps help you in some way. I also found that using $ timeout in a directive can cause leaks just in case this helps.