JavaScript Compression and Caching of Assets

Question

I'm working on an idea that i can't seem to find a good answer though hours and hours of searching,

I'm planning a small Canvas/WebGL Application this application will be using WebSockets to talk to a game server for syncing data to and from so think of it as a MMO type service

so im planning to have a queuing system to load assets E.G I make a request to get model1 and it's texture so that will quee

Mthd | Data                   | q | p | s
GET  | /asset/model_1/model   | 0 | 0 | 0
GET  | /asset/model_1/texture | 0 | 0 | 0
GET  | /asset/model_1/model   | 1 | 1 | 0
GET  | /asset/model_1/texture | 1 | 1 | 0
...
GET  | /asset/model_1/model   | 5 | 5 | 0
GET  | /asset/model_1/texture | 5 | 5 | 0

Key

q = quality modifier 
p = priority lower is better
s = status `0 not started, 1 downloading, 2 complete`

so my client is processing that download que however while this is going on another player has come into my view so i need that players model and texture so i add them to the que and end up like so

Mthd | Data                   | q | p | s
GET  | /asset/model_1/model   | 0 | 0 | 2
GET  | /asset/model_1/texture | 0 | 0 | 2
GET  | /asset/model_2/model   | 0 | 0 | 0
GET  | /asset/model_2/texture | 0 | 0 | 0
GET  | /asset/model_1/model   | 1 | 1 | 1
GET  | /asset/model_1/texture | 1 | 1 | 0
GET  | /asset/model_2/model   | 1 | 1 | 0
GET  | /asset/model_2/texture | 1 | 1 | 0
...
GET  | /asset/model_1/model   | 5 | 5 | 0
GET  | /asset/model_1/texture | 5 | 5 | 0
GET  | /asset/model_2/model   | 5 | 5 | 0
GET  | /asset/model_2/texture | 5 | 5 | 0

Now i'm wanting to cache these file into the browser cache so i'm tied between using the database and compressing using something like LWZ, or putting the assets online and using appCache and loading them.

So My Questions.

If i load an asset though the browser normally (http request) will the browser will keep that image in memory once it's no longer being rendered.

If i use Javascript to hold the base64 string should i then remove the string from the javascript variable (delete) i know it would free up the memory holding the string but would it free it all the memory used or would the browser still keep a copy of the image generated from base64 in memory.

Is it possible to write content loading through WebSockets into the appCache E.G the base64 string from the WebSocket Server.

Has any one found a better string compression system for Javascript other than LWZ i'm planning on compressing using a application at the server side so the only limit on compression is javascript supporting it.

Answer 1

If i load an asset though the browser normally (http request) will the browser will keep that image in memory once it's no longer being rendered.

Browser typically cache files, like images. When asking the server for files it first asks if they have changed. If the browser returns that the file has not changed the browser will use the file from cache. (This has caused a few interesting issues when making changes to .css and .js files where the new file is not pushed out to the client). For an experament I was able to delete an image from a web page after it had loaded (using the Dev Tools for both Firefox and Chrome) and then copy back in the HTML to render the image. Looking at the network history for the page it shows the initial load of the image but not a second request after loading the HTML back into the page.

If i use Javascript to hold the base64 string should i then remove the string from the javascript variable (delete) i know it would free up the memory holding the string but would it free it all the memory used or would the browser still keep a copy of the image generated from base64 in memory.

If you make a call to change the image from a base64 encoded string back into an image the image should then not require the string to exist. Overall you should also not have to delete a javascript variable as the garbage collector should take care of it after it is not being used.

Is it possible to write content loading through WebSockets into the appCache E.G the base64 string from the WebSocket Server.

From my experience with websockets (jWebsockets to be precise) they interface with the loaded javascript on the page. Because you can also use javascript to write to the appCache you should have no problem writing your base64 string to the appCache.

http://www.html5rocks.com/en/tutorials/appcache/beginner/

Has any one found a better string compression system for Javascript other than LWZ i'm planning on compressing using a application at the server side so the only limit on compression is javascript supporting it.

Sorry can't help with this one. Seems this is the most popular option. Without running a lot of benchmarks I could not give you a reason to use an alternative.