Memory leak when leaving the canvas page

[mlhoutel]

Describe the bug When there is a p5 component on a page and we navigate to another page, the canvas does not seem to be cleaned up. When we return to the page, another canvas is instantiated. If we browse several pages each containing a canvas, the performance is greatly degraded.

To Reproduce This issue can be demonstrated on the site of p5-svelte:

1. Go to https://p5-svelte.netlify.app/
2. Click on the "Docs" button at the top (to navigate to https://p5-svelte.netlify.app/docs/get-started)
3. Click on the "p5-svelte" button to go back to the main page
4. Repeat the step 2. and 3. several times

You should notice a decrease in the framerate of the main demo (the update of the fractal canopy become jerky).

This can be measured more accurately using the p5.frameRate() function.

With one of my sites in svelte-kit (ssr), I noticed an increase (invariant of the drawing process) of on average 10ms per frame (60fps, so 16ms => 26ms => 36ms...)

Expected behavior One should be able to navigate between pages without performance impact. The drawing process should be cleared after leaving the page.

Screenshots Chrome recorded performances on https://p5-svelte.netlify.app/, the green curve represents the DOM nodes that are still held in memory

Desktop

• OS: Windows 11
• Browser: Chrome (v109.0.5414.75), Firefox (v108.0.2)
• Version: 3.1.2

[dominikbeveridge]

Hey there,

Just letting you know I have the same problem. Have you managed to find a fix for it?

Cheers,

[mlhoutel]

Yes, I proposed a fix here, but I didn't get any feedback. The repo author seems to be away.

However, it's quite easy to implement this solution directly in your project (for instance).

[dominikbeveridge]

I implemented it directly in my project as per your link, and it works perfectly. Thanks for the help!