search

IgniteUI / igniteui-angular

Ignite UI for Angular is a complete library of Angular-native, Material-based Angular UI components with the fastest grids and charts, Pivot Grid, Dock Manager, Hierarchical Grid, and more.
https://www.infragistics.com/products/ignite-ui-angular
Other
572 stars 161 forks source link

igx-grid memory leak when users click pagination buttons #13994

Closed jsakamotoIGJP closed 3 weeks ago

jsakamotoIGJP commented 8 months ago

Description

The igx-grid has a memory leaking problem. It happens when users click the paginator buttons.

Steps to reproduce

  1. Open the browser's Dev Tools / Memory tab.
  2. Take the 1st memory snapshot (don't forget to click the "Collect garbage" button before taking.)
  3. Navigate to the page with an igx-grid component with a pagenator.
  4. Click on the "next page" button of the pagenator.
  5. Go back to the home page.
  6. Take the 2nd memory snapshot (remember to click the "Collect garbage" button before taking it).
  7. In the Dev Tools Memory tab, Choose "Comparison" in the "Perspective" dropdown and input "igx" into the "Class filter" text field.

https://github.com/IgniteUI/igniteui-angular/assets/102948935/1ea9cfc5-d00a-4d87-bc03-0d73f58d888b

Result

You will see there are some objects with the name "igx" that were added but not deleted in the "Comparison" view of the Memory tab.

Expected result

The "Delta" column for all objects with the name "igx" should be zero in the "Comparison" view of the Memory tab.

Attachments

📦c-00235192-ng-app1-v17.1.4 (2).zip

github-actions[bot] commented 4 months ago

There has been no recent activity and this issue has been marked inactive.

jsakamotoIGJP commented 3 months ago

Hi @ChronosSF, thank you for reopening this ticket!

github-actions[bot] commented 1 month ago

There has been no recent activity and this issue has been marked inactive.

MayaKirova commented 1 month ago

@dkamburov @ChronosSF Looking into this it seems like there are some detached nodes that get left on the page, such as the igx-grid node itself:

image

However that seems to be the case for any component where you have done any type of interaction (for example clicked on a button) and then destroy it.

I’ve modified the sample a bit here: c-00235192-ng-app1-v17.1.4.2-modified.zip

I’ve added to the sample another page that loads a very simple component (app-component-test) with some text and a button, the button does nothing and the text is static. Still if you do the following: 1) Do a baseline mem. profile 2) Navigate to the new page (Go to test page 5) 3) Click on the button 4) Navigate back to home 5) Do another mem.profile and compare them.

You’ll notice that the component’s DOM (app-component-test) remains in memory: image

You can also find the content of the component as detached nodes.

That seems to be similar to an issue logged in angular: https://github.com/angular/angular/issues/56477 That has then been closed as an upstream issue in Chrome: https://issues.chromium.org/issues/40056157 https://issues.chromium.org/issues/41466808

I don't think there's anything we can do on our side for this.

ChronosSF commented 3 weeks ago

Thank you for investigating this so thoroughly, @MayaKirova . I am closing this as a third-party-issue.