search

telerik / kendo-angular

Issue tracker - Kendo UI for Angular
http://www.telerik.com/kendo-angular-ui/
Other
469 stars 217 forks source link

Memory leak: Kendo components create huge memory leaks and slow down the application #1296

Closed prabh-62 closed 6 years ago

prabh-62 commented 6 years ago

I'm submitting a...

Current behavior

We are using various Kendo Components in our Angular 5 application. We found out that app's performance gets progressively worse over time. Profiling on Chrome shows lot of memory leaks including detached DOM nodes which don't get garbage collected. Reporting about Kendo Date-picker but there are more components that degrade app's performance (including Dropdown lists, Buttons, etc)

Expected behavior

Once a component is destroyed or is removed from DOM(with ngIf), component should be garbage collected and detached DOM nodes should be removed/cleaned up.

Minimal reproduction of the problem with instructions

date-picker

The green line(for DOM nodes) never comes down even after manually clicking on garbage collect button.

What is the motivation or use case for changing the behavior?

Environment

Browser:

System:

tsvetomir commented 6 years ago

Are you running your application in production mode? There's a known issue that leads to memory leaks in development, see angular/angular#14061

mbrookson commented 6 years ago

@tsvetomir If you read this carefully, @prabh-62 is pointing out that the issue occurs on the Kendo documentation website. This also seems to be a problem in my project too.

tsvetomir commented 6 years ago

We did confirm the issue in a support ticket. The leak occurs after opening the date picker.

The ngIf leak is not related, but still occurs in development mode.

mbrookson commented 6 years ago

Interesting. I am actually seeing this continually increasing memory issue without using the Datepicker. From what I've found so far, it is extremely noticeable when using a Kendo grid with menu filter and 500 rows. There are obviously a large number of DOM elements created then, but as you then navigate away from the route with the grid and then back to it, Chrome shows that the DOM nodes, JS event handlers and memory usage keep creeping up. It looks like you can see the garbage collection working as it drops every now and then, but in general it keeps increasing. We have seen our application take up almost 1GB of memory. Not sure if this is a Kendo or general Angular issue but it still happens even when calling enableProdMode()

tsvetomir commented 6 years ago

@mbrookson, do you get the same behavior with AoT template compilation? It should improve memory usage over the JIT compiler.

mbrookson commented 6 years ago

Yeah, we build live apps with --prod to enable AoT and all the build optimizer stuff and still see it happening. Have had feedback saying that sometimes if left open for hours it can cause the page to become unresponsive and requires a full refresh.

tsvetomir commented 6 years ago

@mbrookson I think it would be best if you can share a sample project in a support ticket. This would allow us to reproduce troubleshoot the issue.

mbrookson commented 6 years ago

I'm wondering if this is a Kendo issue or an issue we have introduced ourselves that is just amplified by a large amount of data in the grid. I created a large grid using the Plunkr example on the Kendo docs and couldn't replicate the memory issue. If I can eliminate our own code as the issue then I will share a sample project. Thanks!

mbrookson commented 6 years ago

@tsvetomir I found the cause of the performance issue I had. It was Chrome plugins, particularly in my case 'Dashlane' password manager. The issue was obviously amplified by having a large grid containing many inputs, which I imagine means any Chrome extensions that scan or profile the web page will slow the page down dramatically.

Not a Kendo bug at all. 👍

ggkrustev commented 6 years ago

Will close the thread as resolved. Please comment I've missed something.