Angular CPU leak in chrome?

Question

We've developed a big web application using angularjs, but currently having the following CPU issue. After a few hours, the CPU is constantly using around 20% of the available CPU. It gets reset when closing the website and starting it again. The users work on citrix servers, so you can imagine how annoying this is.

Website is developed using:

• Javascript
• HTML/CSS
• Angularjs
• JQuery

All watches in the directives and controllers are unwatched on destroy of the scope. So guessing that this is not the issue.

Does anyone had this issue before? The citrix servers are getting pushed while doing nothing. And this is causing issues due work performance.

Answer 1

It is kind of difficult to debug this kind of thing especially when you are talking about the overall application.

I will recommend you to do a CPU profiling using the Chrome browser.

Alt+shift+j - to open the dev console.

Open the dev-console using the shortcut above, then click on the profile tab. Select "Record Javascript CPU profiling" then "start" recording for your angular application.

What you need here is, refresh the page. Let it run for awhile, I would say at least for a few seconds to begin with? Then stop the recording. Select "Chart" from the little triangle button and a flame chart should be displayed. Once you are in the Flame Chart, you can zoom and pan to see the how long each function take, and exactly what functions are being called. The Flame Chart is a very powerful tool for tracking down page load issues like performance problems or CPU usage etc.

https://developer.chrome.com/devtools/docs/cpu-profiling