Angularjs 1.5: How to determine what is happening and fix the leak?

Question

Tested in latest versions of Chrome and other browsers. This page runs timer() to refresh every 60 seconds. On init() and each refresh() it receives data from the server and displays it on the page. We see that it runs a lot of MB every time.

• Now, how do I identify specific objects and / or DOM nodes that are leaking

• Once I identify the object / nodes from # 1, how do I solve the leak problem?

Are there any books, good tutorials that would cover above for Angularjs 1.5?

Answer 1

You probably found https://developers.google.com/web/tools/chrome-devtools/memory-problems/ and http://www.dwmkerr.com/fixing-memory-leaks-in-angularjs-applications/ , since there is no more detailed resource.

A DOM node can only be collected by garbage collection, if there are no links to it either from the page DOM tree or from JavaScript code. A node is called "detached" when it is removed from the DOM tree, but some JavaScript still references it. Individual DOM nodes are a common cause of memory leaks.

• If you do not keep a link to a timer, but create a new timer each time you update a leak, allow reuse of $timeout

• Checkout - CTRL + F $scope is retained by a context for a closure. on the second link provided. The explained usage example is similar to the one you have. Further in the article:

We can open the function and study it for problems. There's $ http.get, which has a closure that uses $ scope, but it is alarming that there is $ interval registered to run every 10 seconds, which is never canceled. The callback interval uses another $ http.get with a closure using $ scope. This is problem.

If none of the above applies, then here is the list of open issues in AngularJS has memory leak as a keyword:

https://github.com/angular/angular.js/issues?utf8=%E2%9C%93&q=is%3Aopen%20memory%20leak

Answer 2

I'm not sure if this will help you (you may have already studied it), but it is worth mentioning. I had a similar problem with the previous application, where objects were constantly duplicated during each ajax request. Thus, from the page load, I would use about 50 MB of memory, but after 10-15 ajax calls the memory, the sky rocket rocket up to 1 GB.

I was able to identify and solve the problem using the chrome dev tools -> memory tool. Here you can record memory allocation profiles and get a heap snapshot. Thus, for your situation, I can reduce the timer to 5 or 10 seconds for testing purposes, and then run these profilers. You can get an idea of ​​what methods are being called and at what price.

Hope this helps.