Current issue in need of resolution: My team and I are currently working on a large application that was initially released around two years ago. We are in the process of adding a new "always-on" status screen to the application, which will be the default page displayed on the dedicated PC the app runs on. However, we have encountered some unusual behavior with this new screen. After a short period of time (a few minutes on IE and longer on Chrome), we notice that the scrolling messages on the screen start to lag and move at about 1 pixel/second. Additionally, the browser itself becomes sluggish, with a delay of several seconds when interacting with elements on the page.
After several days of investigation, we believe that the issue may be related to a memory leak within the service we are using to poll data. This seems to affect all pages that utilize the service, but the symptoms are amplified on the new screen due to its visually intensive nature. I have captured a timeline screenshot using Chrome's developer tools, which shows a similar pattern on all pages using the polling service. I have also created a demo focusing solely on the polling process, which exhibits a similar memory leak pattern. How can we address the memory leak and resolve the performance issues we are facing?
Below is an example of the relevant code snippet:
var reload = function() {
$http({
method: 'GET',
url: 'api.txt',
timeout: 5000
})
.success(function(response) {
//do stuff
})
.error(function(data) {
//do other stuff
})
.finally(function() {
timer = $timeout(reload, 1000);
});
};