DOM Nodes Not Being Released - Possible Memory Leak

[seanareed]

🐞 bug report

Description

I'm noticing DOM nodes are not being released when I enter a text-input value into a form and navigate away from the page.

On larger projects with many elements on the page, the app gets laggy over time and memory usage continually increases.

It is also evident in an app with the simplest form if you watch the performance monitor and do a performance recording in Chrome.

I'm thinking this is a bug, but I'd love feedback if I'm doing something wrong or if there's a workaround.

In my example app, if you repeatedly navigate back and forth between the Home page and the Add-Edit page by clicking the "Add Item" and "Home" buttons without entering anything into the text input box, the accumulated DOM nodes and listeners are removed periodically, which is evident in the performance monitor/recording.

However, if you repeatedly navigate to the "Add-Edit" page, enter something into the text input box, and then click the "Home" button, with or without submitting the form, the listeners are removed but the DOM nodes aren't.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-issue-repro2-qr8rx3

The Performance Monitor and performance recording in Chrome make the symptoms much more evident if you open the StackBlitz app in a new window.

🌍 Your Environment

• macOS 10.15.4
• Chrome 80.0.3987.163

Angular Version:

Angular CLI: 9.1.1
Node: 10.16.0
OS: darwin x64

Angular: 9.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.1
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?

This may be related to other open issues, but this example reduces it to as vanilla an app as possible, with no directives or animation.

Performance Recordings:

Nodes, JS heap, and listeners when simply navigating back and forth without entering anything into the form's text input box:

Nodes, JS heap, and listeners when navigating to Add-Edit, entering text into the input field, and navigating back to Home without submitting:

The same but just the nodes:

[AleksanderBodurri]

Your minimal reproduction app is an angular 6 application.

[seanareed]

Thanks for noticing that.

I've updated the package.json on StackBlitz to match my package.json (angular 9.1.1).

The minimal reproduction app dependencies now coincide with the environment in which I'm experiencing the unexpected behavior.

[AleksanderBodurri]

No worries. I agree that this behaviour is unexpected but I wonder if Angular is really the cause.

Out of curiosity, do you have any chrome extensions enabled?

[AleksanderBodurri]

Probably unrelated but it appears that ivy is not enabled in your reproduction app.

[AleksanderBodurri]

See possibly related issue discussed here angular/angular.js#4864

[sonukapoor]

Related Issue: #36449

[seanareed]

Probably unrelated but it appears that ivy is not enabled in your reproduction app.

Thanks again. I've updated the angular.json file to match my local angular.json file as well.

[seanareed]

See possibly related issue discussed here angular/angular.js#4864

That looks like an issue with AngularJS. The latest version I see named there is 1.3.15. Did you see something there that you think is still relevant?

[seanareed]

Out of curiosity, do you have any chrome extensions enabled?

@AleksanderBodurri Good call. I've just disabled all of my extensions, and the issue seems to be remedied. I'll add them back in one by one and post the results.

[seanareed]

@AleksanderBodurri @sonukapoor Disabling the 1Password extension seems to fix the issue in just a normal Chrome browser when served using "ng start", which is good news, so this is probably solved as far as Angular goes, since it's probably not an Angular bug.

I first noticed the issue when using Angular within an Electron app, however, which uses Chromium as far as I can tell, and I'm not sure whether there are extensions preinstalled. When I put my mini reproduction back into an Electron app just now, the same DOM nodes accretion was evident again. I'll move that topic over to a normal "issues" ticket though.

Thanks!

[AleksanderBodurri]

See possibly related issue discussed here angular/angular.js#4864

That looks like an issue with AngularJS. The latest version I see named there is 1.3.15. Did you see something there that you think is still relevant?

It's possible, although I'd say unlikely, that the source of the issue is a V8 memory leak amplified by the fact that an application is an SPA (since DOM nodes are not automatically dropped between pages).

@AleksanderBodurri @sonukapoor Disabling the 1Password extension seems to fix the issue in just a normal Chrome browser when served using "ng start", which is good news, so this is probably solved as far as Angular goes, since it's probably not an Angular bug.

I first noticed the issue when using Angular within an Electron app, however, which uses Chromium as far as I can tell, and I'm not sure whether there are extensions preinstalled. When I put my mini reproduction back into an Electron app just now, the same DOM nodes accretion was evident again. I'll move that topic over to a normal "issues" ticket though.

Thanks!

This is strange. I wouldn't write off this issue so easily if the electron app behaved that way.

Definitely warrants further investigation.

[seanareed]

@AleksanderBodurri In an attempt to further isolate the issue for myself, a couple of new things:

I created a new Electron-Angular app using the latest versions of both (8.2.2 an 9.1.1) and the exact minimal reproduction app I gave above, and the problem still persists is that context as originally described.

I've run the same mini reproduction app in a freshly installed Chromium (84.0.4114.0), and there is no problem - the DOM node accretion behavior is not present at all.

[AleksanderBodurri]

It seems electron is on an older build of chromium right now. See https://www.electronjs.org/releases/stable

Maybe the leak was fixed in a recent version of Chromium that hasn't yet propagated to Electron or the latest version of Google Chrome.

Does the issue still occur in an up to date Google Chrome? If not can you test it on the canary build of chrome? https://www.google.com/intl/en_uk/chrome/canary/

[seanareed]

I've just tested it with Chromium 80.0.3987.0 and there is no problem in that one either. The Electron version I'm running lists 80.0.3987.163 as its version.

I'll look into the canary build later too.

[seanareed]

I've just tested my minimal reproduction app in Google Chrome stable 81.0.4044.92 as well as the canary build 84.0.4114.0 with no additional extensions (no 1Password etc). The app behaves "correctly" in both. The DOM nodes are periodically removed as expected with none of the runaway increase I described in my original post.

So it appears to be only happening when I have the 1Password extension enabled or when I'm running the app within Electron.

[vladimiry]

Referencing possibly related issue #35164.

[pkozlowski-opensource]

So if I understand things correctly:

• it is about leaking DOM nodes;
• the issue happens only when there is a 3rd party extension (1Password was mentioned here) or when chrome is embedded in other environment (electron).

The way I read it is that something in the extension / electron is holding onto DOM nodes. At this point I can't see the evidence of Angular being the culprit here. Plus we don't have any complete reproduce scenario to investigate. As such I've got no choice but close this issue. Still, I'm more than happy to investigate if anyone can provide an isolated reproduce scenario with just Angular - otherwise you are better positioned to investigate it (since you've got your app up and running).

@vladimiry - I don't think this issue is related to #35164 in any way, as #35164 would occur in any environment, extensions / electron or not (it has a well-understood root cause).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}