Prerequisites
Stencil Version
2.18.0
Current Behavior
I am investigating some behaviour I'm seeing in my application (an Ionic application using StencilJS as the framework/runtime) where memory and DOM nodes appear to be leaking. This is occurring when modals are being opened and then dismissed.
I have created a minimal reproduction which you can find here:
https://rococo-creponne-086676.netlify.app/
Code here:
https://github.com/joewoodhouse/stencil-modal-memory-investigation
The reproduction site basically offers two buttons - one that demonstrates the resource leak, and one that demonstrates non-leak behaviour. Both buttons open a modal via the modalController.create method, then immediately dismiss it, and repeat. The component that is created in the modal (app-home) takes one prop, which alters the content it displays. When the "Run Broken" button is pressed, the app-home component renders an <ion-list/> in it's element. When "Run Working" is pressed, the app-home component uses a <div/> instead of an <ion-list/>. The use of div vs ion-list is the only difference (from a user perspective) between the two scenarios.
Once you have pressed "Run Broken" you can see the resource leak via DevTools. Using the Performance Monitor you can see the number of DOM nodes ever increasing, and any attempt to manually trigger a garbage collection does not bring them down. Where as when you choose "Run Working" then the number of DOM nodes will remain stable and triggering a manual GC will immediately flush it back to starting levels.
Taking a Heap Snapshot also shows the leak, where if you inspect the snapshot you will see 100s of Detached elements (ion-modal) instances in the heap.
Tested in Chrome 105.0
I have tried and failed to recreate this within the Ionic source code - my original hunch was that is was some leak in the modal implementation, or perhaps even the ion-list element. But I could not recreate it there which made me believe that it must be more down to the Stencil runtime. Whenever I'm exploring the heap snapshots I come to a dead end at $lazyInstance$ which I think is part of the Stencil runtime, but I am not an expert and couldn't get further.
This is a real issue for us that our users are experiencing - I hope that my code and reproductions are useful and if you need any more info please let me know.
Expected Behavior
Resources (heap memory and DOM nodes) should not leak when opening and closing modals.
Steps to Reproduce
Use the reproduction site (either directly here https://rococo-creponne-086676.netlify.app/ or the code is here https://github.com/joewoodhouse/stencil-modal-memory-investigation
Press "Run Broken"
Monitor DOM nodes and Heap memory
Note: The modal is only visible at a desktop viewport size, I couldn't work out the Ionic reason why
Code Reproduction URL
https://github.com/joewoodhouse/stencil-modal-memory-investigation
https://rococo-creponne-086676.netlify.app/
Additional Information
Using latest Ionic as well (6.2.7)
Prerequisites
Stencil Version
2.18.0
Current Behavior
I am investigating some behaviour I'm seeing in my application (an Ionic application using StencilJS as the framework/runtime) where memory and DOM nodes appear to be leaking. This is occurring when modals are being opened and then dismissed.
I have created a minimal reproduction which you can find here:
https://rococo-creponne-086676.netlify.app/
Code here:
https://github.com/joewoodhouse/stencil-modal-memory-investigation
The reproduction site basically offers two buttons - one that demonstrates the resource leak, and one that demonstrates non-leak behaviour. Both buttons open a modal via the
modalController.createmethod, then immediately dismiss it, and repeat. The component that is created in the modal (app-home) takes one prop, which alters the content it displays. When the "Run Broken" button is pressed, the app-home component renders an<ion-list/>in it's element. When "Run Working" is pressed, theapp-homecomponent uses a<div/>instead of an<ion-list/>. The use of div vs ion-list is the only difference (from a user perspective) between the two scenarios.Once you have pressed "Run Broken" you can see the resource leak via DevTools. Using the Performance Monitor you can see the number of DOM nodes ever increasing, and any attempt to manually trigger a garbage collection does not bring them down. Where as when you choose "Run Working" then the number of DOM nodes will remain stable and triggering a manual GC will immediately flush it back to starting levels.
Taking a Heap Snapshot also shows the leak, where if you inspect the snapshot you will see 100s of Detached elements (ion-modal) instances in the heap.
Tested in Chrome 105.0
I have tried and failed to recreate this within the Ionic source code - my original hunch was that is was some leak in the modal implementation, or perhaps even the ion-list element. But I could not recreate it there which made me believe that it must be more down to the Stencil runtime. Whenever I'm exploring the heap snapshots I come to a dead end at
$lazyInstance$which I think is part of the Stencil runtime, but I am not an expert and couldn't get further.This is a real issue for us that our users are experiencing - I hope that my code and reproductions are useful and if you need any more info please let me know.
Expected Behavior
Resources (heap memory and DOM nodes) should not leak when opening and closing modals.
Steps to Reproduce
Use the reproduction site (either directly here https://rococo-creponne-086676.netlify.app/ or the code is here https://github.com/joewoodhouse/stencil-modal-memory-investigation
Press "Run Broken"
Monitor DOM nodes and Heap memory
Note: The modal is only visible at a desktop viewport size, I couldn't work out the Ionic reason why
Code Reproduction URL
https://github.com/joewoodhouse/stencil-modal-memory-investigation
https://rococo-creponne-086676.netlify.app/
Additional Information
Using latest Ionic as well (6.2.7)