Unloading Resources on HTML with JavaScript

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开发者_Python百科 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!

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.

All you can do is rely on JavaScript's built in garbage collection mechanism.

This kicks in whenever there is no reference to your image.

So assuming you have a reference pointer for each image, if you use:

img.destroy()

or

img.parentNode.removeChild(img)

Worth checking out: http://www.ibm.com/developerworks/web/library/wa-memleak/

Also: Need help using this function to destroy an item on canvas using javascript

EDIT

Here is some code that allows you to load an image into a var.

<script language = "JavaScript">


var heavyImage = new Image(); 
heavyImage.src = "heavyimagefile.jpg";

......

heavyImage = null; // removes reference and frees up memory

</script>

This is better that using JQuery .load() becuase it gives you more control over image references, and they will be removed from memory if the reference is gone (null)

Taken from: http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

Hope it helps!

There are 2 better ways to load images besides a normal <img> tag, which Google brilliantly discusses here:

http://www.youtube.com/watch?v=7pCh62wr6m0&list=UU_x5XG1OV2P6uZZ5FSM9Ttw&index=74

1. Loading the images in through an HTML5 <canvas> which is way way faster. I would really watch that video and implement these methods for more speed. I would imagine garbage collection with canvas would function better because it's breaking away from the DOM.

2. Embedded data urls, where the src attribute of an image tag is the actual binary data of the image (yeah it's a giant string). It starts like this: src="data:image/jpeg;base64,/9j/MASSIVE-STRING ... " After using this, you would of course want to use a method to remove this node as discussed in the other answers. (I don't know how to generate this base64 string, try Google or the video)

You said Worst scenario: Would using frames help, by deleting a frame, to free those frames' resources

It is good to use frame. Yes, it can free up resource by deleting the frames.

All right, so I've made my tests by loading 3 different HTML into an < article > tag. Each HTML had many, huge images. Somewhat about 15 huge images per "page".

So I used jQuery.load() function to insert each in the tag. Also had an extra HTML that only had an < h1 >, to see what happened when a page with no images was replacing the previous page.

Well, turns out the RAM goes bigger while you start scrolling, and shoots up when going through a particularly big image (big as in dimensions and size, not just size). But once you leave that behind and lighter images come to screen, the RAM consumption actually goes down. And whenever I replaced using JS the content of the page, the RAM consumption went really down when it was occupying to much. Virtual Memory remained always high and rarely went down.

So I guess the browser is quite smart about handling Resources. It does not seem to unload them if you leave it there for a long while, but as soon you start loading other pages or scrolling, it starts loading / freeing up.

I guess I don't have anything to worry about after all...

Thanks everyone! =)