I am currently working on an AngularJs App with 3 screens. The app is set up to route between these 3 screens every X seconds using the ui-router component.
$stateProvider
.state("page", {
url: "/:pageId/:pageType",
template: pageTemplate,
controller: "contentCtrl",
resolve: {
contentSolver: function (resolveService, $stateParams) {
resolveService.solveData($stateParams.pageId, $stateParams.pageType);
}
}
})
Additionally,
$state.go('page', {
pageId: $stateParams.pageId,
pageType: pageType
});
In order to retrieve page content from the server and pass it to the controller, I have implemented a service called resolveService.
However, I have noticed that memory leaks occur with every screen change. This issue does not arise if I do not switch between pages.
Upon investigating further, I discovered that when making multiple switches on the same page, identical images are requested each time.
Is there a way to address this and remove the old images?
https://i.sstatic.net/U9fOC.png
When analyzing the Performance tab in Chrome Dev tools, I observed a rapid increase in the number of nodes. What should I focus on in this scenario?
https://i.sstatic.net/BEJSm.png
Are there any effective tools available for identifying memory leaks? I have tried various Chrome extensions and Dynatrace, but they seem to lack support for my specific setup. Any suggestions would be greatly appreciated :)