Memory leak

[ferferga]

Description of the bug

There's a memory leak with DOM elements not being detached correctly in master when switching between pages, so long-running sessions of the client might make the browser consume a lot of memory.

I believe this is caused by a combination of Suspense (which is still beta) and Transition, as showcased in https://github.com/antfu/repro-vue-suspense-transition-memleak

I'm still trying to isolate all the dependencies as much as possible to triage where this is coming from exactly, since this might not be a Vue bug.

[ferferga]

This comes with huge delay, but there have been a lot of advancements in this regard.

Though Vue still has many Suspense issues when combined with transitions, I'm almost sure the exact source of our leak is on Vuetify's side, since the antfu's repo was GC'ed correctly and many other complex demos with Suspense + Transition did too.

While profiling in our client, all the references pointed me to VBtn, which lead me to focus on Vuetify only. I posted this on Vuetify's Discord the 08/06/2023 (DD/MM/YYYY):

Details

For context, I'm using Edge DevTools

1. Open this: https://play.vuetifyjs.com/#eNqlUL1uwjAQfpWrF1qJxAOdUEB06wN0wwwhuVAX/8k2qSqUd6/tBBTCgsR29919P3fbM/kwJm9PSJak8CiNKD2umQIo2qw0JpWpqbTyJVdoByiBe6+gzXizYsTrw0EgI7CGTxRCQ0HTfLq+qQSvjlcCrODlQl3DV4/dUmN36x6RPlxBR6FD6yrLjQeH/tRn59Jo6+EMFhvooLFawizcO4vDoOo8XIOEldemFA7fonAvFUTInPQqmSxN/uO0Cs86Rz4bBo6RJSQkYkE99ox8e2/cktKqVoFWo+CtzRV6qoykm7BG7Ul5LjGrtdws8kX+Tmvu/BjO0clsb/WvQxtEGJmPbDxv/h6wGjaTw6J3GKBMlHsXLe6kafBr0WYWVY0W7aMXTWjjqyaju8uie8dUF/4tuDq6yasrl968vYR86uQkFpV20bCbk5QzOCcC2f0DuX8JMw==

2. Open the performance monitor. See the DOM node count and note it.

3. Toggle the button a few times using the toggle button.

4. Run GC by going to the memory tab and clicking the trashcan icon.
   Expected: DOM node count matches the amount noted in 2.
   Happens: There are more nodes

5. In memory profiling you'll find detached elements, when you shouldn't

(You should refresh the tab and run GC again every time you perform a change in the template and want so there are no external "variables" that could affect the results of the test. A tab refresh should always render the same amount of nodes regardless, in my case it's consistently 860)

Repeat this with this raw vue: https://play.vuejs.org/#eNo9jTEOwjAMRa9ishQGiLqiFMHGAZBYskBw24g0jlKnS9W7kxKpm7/03vMsbiGcpoTiLNRoog0MI3IKF+3tECgyzBCxhQXaSANUGa20196QHxmYus4hNCuy55jwoL2SpZMLeTAOwb0Y8wJQ78RMHq7GWfNttNj8Xbm0+HMAjzJXRxapBPoapqNtNzULd3SO4EnRfXZK9nUGldzeiuUHZbxN9A==
DOM nodes will always go down to the original value after GC

You could even reproduce the same behaviour with swiper demos, which all are GCed correctly: https://swiperjs.com/demos

I didn't open an issue in their repo yet since I still didn't have conclusive results.

[ferferga]

#2201 Really improved the situation, since the items store couldn't be garbaged collected properly. However, there are still some leaks in the full music player's swiper and the draggable queue (although they are minor and probably affects less users).

[ferferga]

For future reference, as of v3.4.11 Vuetify has been fixing memory leak issues since v3.4.6.

v3.4.5:

• vuetifyjs/vuetify@ca2174c

v3.4.6:

• vuetifyjs/vuetify@af07b7f

v3.4.8:

• vuetifyjs/vuetify@3176463

v3.4.11:

• vuetifyjs/vuetify@5b07a9f
• vuetifyjs/vuetify@64618ff