Memory Leaks using lotties

[Roberto Oneto]

I recently ventured into developing a (another) game extension.
It is the game of the 2-D Mahjong also known as Shisen Sho.
Instead of using Mahjong's classic tiles I thought of using emojis and lotties.
The game is, at least for the first levels of play, within the reach of the kids.
The game difficulty grows with the number of tiles on the board.
User can choose to play with a set of emoji (among animals, food or mahjonh tiles) or with animated lotties.
With emoji I don't have any problem, but when user chooce to play with lotties the use of memory grows a lot and it seems never comes released.
With emojis, the memory consumption is around 40 MB (I see this info hovering mouse over the label of the tab where the game is running).
When instead the tiles are made up of lotties, it starts from a consumption of 40 MB of memory that comes after a 10-12 levels at over 1 Gbytes!
I can't understand where the problem lies.
All the sounds and lotties of the game (mp3 + json files) are previously saved in the storage cache to minimize the loading times.
During the game I tried to inspect the DOM to see if duplicate elements were created that they would have made grow the use of memory but I have not found anything anomalous.
I use this libray for looties lottie-player.

When I go from a level to another, I destroy the previous game table with "replaceChildren" and build a new game table.

Have any of you ever worked with this type of object? (lotties) and have ever encountered similar problems?
Any advice on how to intercept this kind of issuee with the browser tools and prevent them?

Anyone who wants to take a look at the game can find it at this URL

TIA

[wOxxOm]

Try using devtools -> Memory tab to find the reason of the leak.

[Roberto Oneto]

I have never used this tool, and this means that I will have to go back to studying.

[Roberto Oneto]

I tried to struggle a bit with the "Memory Card" tool, but I couldn't figure out where the problem really lies.

I'm pretty sure these "lotties" were not designed to be displayed in large quantities at once on the same page.

In my case, when the game reaches the 15th level I drew 18x8=144 looties.

Even if I set them to static (not animated) I see the memory usage go up even when I mouse over the board or select a pair.

If I set them "animated" then things are even worse :-(

I noticed that the DOM node containing the main board is not changed when playing a level. I reset this node with replaceChildren at the beginning of each level, but perhaps it is not enough to destroy all the lotties objects!

I'm starting to think that the problem lies precisely in these looties and in the JS library that manages them.

Has anyone had similar experiences?

[woxxom]

Did you select the correct JS instance in the memory snapshot panel? I see a lot of detached DOM nodes held by lottie-player.js after completing just a couple of levels. Try finding a different library.

[Roberto Oneto]

Iit's not a very intuitive tool (for me at least).

However, I selected "allocation instrumentation on timeline", started a recording and went through the time frames where I saw memory peaks.

Where do you understand\see that there are nodes that are not released from the library?

However now I try to look for a different library.

To tell the truth, I had already found another library, but I decided not to use it because I understood that it was impossible to include it in the extension package because it used remote code internally (the chinese boxes)

If I find an alternative and the problem recurs then it is highly likely that the problem is me. :-)

Thank you for your reply.

[woxxom]

It's "Heap snapshot". Indeed it's not really obvious, so you'll have to study some tutorials.