bug: Memory Leaks on several material components ?

[flemgs]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/github-x9pcfz

Hello, I have an application where I make massive use of material components and I found that my application had memory leaks.

I created an empty Angular 8.2.14 application and imported inside some material components that I use to test them. Here is what the application looks like:

Source code here: https://stackblitz.com/edit/github-x9pcfz

For each components I implemented with Selenium a test scenario containing interactions that are repeated 1000 times. Here are the list of interactions for each tested components:

• mat-ripple: Tap the RIPPLE button.
• mat-menu: Tap the OPEN MENU label and then tap MENU ITEM in the opened menu to close the menu.
• mat-slide-toggle: Tap twice SLIDE TOGGLE to switch states.
• mat-checkbox: Tap twice CHECKBOX to switch states.
• mat-radio: Tap twice RADIO to switch states.
• mat-stepper: Tap three times NEXT button to go across the 3 steps.
• mat-slider: Tap MINUS button to decrease slider and then tap PLUS button to increase the slider.

Before testing a component 1000 times, Chromium is restarted with following option: -js-flags=--gc-global=true, --expose-gc=true in incognito mode. The test wait 1 second after each tap. At the end of each iteration, the test record the current JS heap size using window.memory.usedJSHeapSize. Each 10 iterations, window.gc() is performed to force Major Garbage Collector and then the test wait 60 seconds. (Yes it took 15 hours to run those tests.)

Here the graph we can plot from the heap size for each scenarios:

A more friendly graph with polynomial smoothing:

My goal here is not to make finger pointing, I like Material since it is pretty simple to use. I am opened to any suggestions to make my tests more reliable or to change the way I am using material components.

Expected Behavior

Memory to be stable over time and not increasing.

Actual Behavior

Memory seems to increase for each tested components.

Environment

• Angular: 8.2.14
• CDK/Material: 8.2.3
• Browser(s): Chromium 78.0.3904.108
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[crisbeto]

It would be interesting to see whether disabling ripples makes a difference since we've had reports about them in the past.

[flemgs]

@crisbeto Hello, I ran the tests again with disabled ripple and replaced tap events that are used by click event, because I suspected HammerJS to be responsible for some memory leaks. Here the graphs that can be plotted:

The results are better overall, but we still observe an increase of the heap size over time.

We could also see that Garbage Collector decided on its own to free a lot of memory for mat-stepper test around the 732 iteration, though windows.gc() is called by the tests every 10 iterations.

NB: mat-ripple test corresponds to a div with disabled ripple and with a click listener.

[flemgs]

Same run than the previous one, except the test wait 45 seconds before AND after it performs the window.gc every 10 iterations, to let the garbage collector do better work:

It is still leaking, but results are better. Though as you could see it is very hard to have relevant results with the V8 Garbage Collector behavior, I am opened to any suggestions to have the most relevant tests possible.

[flemgs]

Hello, is there any update on this ? Our single page app can be started over several days and memory consumption keeps rising up to the sky.