Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Memory leak with detached DOM nodes leading to infinite growth #30215

Open
3 tasks done
ralphcode opened this issue Feb 25, 2025 · 0 comments
Open
3 tasks done

bug: Memory leak with detached DOM nodes leading to infinite growth #30215

ralphcode opened this issue Feb 25, 2025 · 0 comments
Labels

Comments

@ralphcode
Copy link

ralphcode commented Feb 25, 2025

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

Navigating between pages in an Ionic + Angular application leads to a steadily increasing DOM node count. Over time, this can balloon to tens of thousands of detached DOM nodes (verified via Chrome DevTools), causing performance degradation and application crashes.

Expected Behavior

When a component or page is destroyed/navigated away from, its DOM elements should be properly removed from memory. The DOM node count should not grow indefinitely, ensuring stable performance over time.

Steps to Reproduce

  1. Clone code reproduction URL + npm install + npm start
  2. Open Chrome DevTools → Performance & Memory tab.
  3. Repeatedly navigate next, then back to root. Each will load 5000 nodes.
  4. Note, ngOnDestroy successfully executes
  5. Observe the DOM node count growing with each navigation in the Performance Monitor, and detached DOM nodes in the Memory tab snapshots. Forcing Garbage collection has no effect.
  6. Snapshotting at root, and then again at root after navigation shows Detached <div> of the exact count with set Objects allocated between Snapshot X and Snapshot X
Screen.Recording.2025-02-26.at.9.40.18.am.mov

Code Reproduction URL

https://github.com/ralphcode/capacitor-angular-dom-leak

Ionic Info

Ionic:

   Ionic CLI                     : 7.2.0
   Ionic Framework               : @ionic/angular 8.4.3
   @angular-devkit/build-angular : 18.2.14
   @angular-devkit/schematics    : 18.2.14
   @angular/cli                  : 18.2.14
   @ionic/angular-toolkit        : 12.1.1

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 2.0.1) : 1.4.0

System:

   NodeJS : v18.20.3
   npm    : 10.7.0
   OS     : macOS Unknown

Additional Information

Possibly related to: #30132 (specifically Resolved performance issues due to detached nodes in memory)

If you need anything further, please let me know

@ionitron-bot ionitron-bot bot added the triage label Feb 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant