I ran into a problem while working on a ticket in the gladius project.
The ticket that I’m working on is about loading resources into the browser’s memory.
The part that I’m struggling with is how to remove the resources from the memory once they’ve been used.
For example:
Lets say a game has 10 levels, each level has different resources. It make sense to load the resources for level 1, level 2, etc, separately. So when the player finishes level 1 and goes to level 2, the resources from level 1 will be unloaded from memory.

I spent a few hours on google trying to find a way to manipulate the browser’s cache with javascript, but I hit a dead end. Not only I didn’t find any information, but all the information I found was saying that it was impossible to do such a thing.

if (!google) goto IRC :)

So there I was. Asking questions on different channels hoping to find a solution. The first answer I got wasn’t very encouraging. I was told that it was impossible to do what I wanted. But I knew it had to be possible. The ticket specifications were very clear, the module needed to unload cached content. So I kept asking.

Luckily, the second answer was a little bit more optimistic. It pointed me in the direction of XHR2 requests and URLObjects.

XHR2(XMLHttpRequest Level 2) has a lot of new features compared to the old XMLHttpRequest,some of the features are:
Cross-origin request
Upload progress events
Upload/Download of binary data
Plus, it can do a lot of other cools things, such as working with the new HTML5 APIs, like the File System, WebAudio and WebGL

But why XHR2 is handy when it comes to loading an image into the browser’s memory?
Because it provides a way to make a request to the server with a responseType set as blob. So the server sends the image back in binary format.
With the image in binary format it’s possible to create a temporary URLObject.
By having an image loaded as a URLObject, it gives the option to dynamically unload the image from the browser memory whenever needed. Here is an example:

 
window.URL = window.URL || window.webkitURL;`

function getBlob(url, cb) {
var r = new XMLHttpRequest();
r.open("GET", url);
r.responseType = "blob" // XHR2
r.send(null);
r.onload = function() { // XHR2
objectURL = window.URL.createObjectURL(r.response); // Creates a temporary URL```

console.log('objectURL: ' + objectURL); // moz-filedata:b42305a0-29a2-4b1e-ae02-6ef78b4cfe4e`

img = new Image();
img.src = objectURL;
img.onerror = function() {
console.log('onerror');
}
img.onload = function() {
console.log('onload');
}
}
}
.....
.....
getBlob('img1.jpg', null);
.....
.....
window.URL.revokeObjectURL(objectURL); // Releases the memory

Even though the solution worked, I’m not sure if it’s a feasible one.
First, it’s not supported by all major browsers. Only Chrome 8+ and Firefox 4+ provide support.
Second, I don’t know what are the performance issues compared to simple http requests.
However, using this technique it should be possible to implement webworkers to make the requests and then post back a message to the page containing the binary for the resource.(*it’s not)!
*
At the moment XHR2 requests are not supported in a worker thread
The bug is already filled in bugzilla
https://bugzilla.mozilla.org/showbug.cgi?id=675504
https://bugzilla.mozilla.org/show
bug.cgi?id=658178

If anybody is interested on the topic, these are some good references:

http://www.html5rocks.com/en/tutorials/file/xhr2/
http://caniuse.com/xhr2
http://davidflanagan.com/Talks/jsconf11/BytesAndBlobs.html
https://developer.mozilla.org/en/DOM/window.URL.createObjectURL
https://developer.mozilla.org/en/DOM/window.URL.revokeObjectURL#Browsercompatibility
https://developer.mozilla.org/en/Using
filesfromwebapplications#Example.3aUsingobjectURLstodisplay_images
http://www.htmlfivewow.com/slide45
http://dev.w3.org/2006/webapi/FileAPI/
http://www.opera.com/docs/specs/presto28/file/