3

I have currently created several single-page web applications using createJS. The basic principle is to preload images and sounds between the different screens in the application, and then releasing those said assets from memory when the screen is changed.

For properly destroying the assets, I am currently employing every single method provided in the documentation, like:

assetLoader.close();
assetLoader.removeAll();
assetLoader.destroy();
element.removeAllEventListeners();
createjs.Sound.removeAllSounds()
createjs.Ticker.removeEventListener("tick", stage);
stage.enableDOMEvents(false),

and also assigning null to every object created during the initialisation.

The end-result looks pretty good, as the JavaScript memory occupied by the appication remains constant all the time (30-60 MB), no matter how much I navigate between the screens of the app.

However, even though I have 0 memory leaks on the JavaScript side, the total RAM memory occupied by the web application keeps increasing all the time, without ever decreasing.

This causes all my applications to eventually reach the memory limit on mobile devices, and then crash.

Basically, I do not know what exactly is kept in the RAM memory and is never released. I am strongly suspecting that the image and sound assets preloaded in the page are never removed from the browser, even though the JS variables associated with them have long been released.

There are also no DOM elements that I can access or manually remove. Chrome dev-tools are also insuficient in this case, they always seem to refer to the JavaScript memory only, when I take Heap snapshots or Record Allocation Timelines.

In that case, how can I release the memory occupied by those image and sound assets, if the methods provided in the documentation are not enough?

EDIT: I know reloading the page will clear that RAM memory, but since those are single-page web apps, I would very much like to avoid resorting to that.

Catalin Iancu
  • 722
  • 5
  • 18

0 Answers0