ferferga
commented
11 months ago 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):
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.
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) andTransition, as showcased in https://github.com/antfu/repro-vue-suspense-transition-memleakI'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.