Question

I’m working on a HTML 5 game, it is already online, but it’s currently small and everything is okay.

Thing is, as it grows, it’s going to be loading many, many images, music, sound effects and more. After 15 minutes of playing the game, at least 100 different resources might have been loaded already. Since it’s an HTML5 App, it never refreshes the page during the game, so they all stack in the background.

I’ve noticed that every resource I load – on WebKit at least, using the Web Inspector – remains there once I remove the <img>, the <link> to the CSS and else. I’m guessing it’s still in memory, just not being used, right?

This would end up consuming a lot of RAM eventually, and lead to a downgrade in performance specially on iOS and Android mobiles (which I slightly notice already on the current version), whose resources are more limited than desktop computers.

My question is: Is it possible to fully unload a Resource, freeing space in the RAM, through JavaScript? Without having to refresh the whole page to “clean it”.

Worst scenario: Would using frames help, by deleting a frame, to free those frames’ resources?.

Thank you!

Answer 1

Your description implies you have fully removed all references to the resources. The behavior you are seeing, then, is simply the garbage collector not having been invoked to clean the space, which is common in javascript implementations until “necessary”. Setting to null or calling delete will usually do no better.

As a common case, you can typically call CollectGarbage() during scene loads/unloads to force the collection process. This is typically the best solution when the data will be loaded for game “stages”, as that is a time that is not time critical. You usually do not want the collector to invoke during gameplay unless it is not a very real-time game.

Frames are usually a difficult solution if you want to keep certain resources around for common game controls. You need to consider whether you are refreshing entire resources or just certain resources.