Memory versus Speed in Javascript Web Applications

Question

In my former web applications, when the user had a transition from one "page" (no page reload, just a new div) to another, I just hid the one div for later use and created + showed the new one. When the user returned from address management to events management, I only needed to hide the current div and re-show the already used one. Of course, this needs memory, but is faster.

In my new web application, I use Backbone.js, Require.js and jQuery. All my modules are AMD (jquery 1.7.1, backbone.js 0.5.3-optamd3, ...).

After reading Derick Bailey's interesting blogs (http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/) I now clean my divs before having a transition to a new "page" and re-create it in case the user returns to it.

Likewise, regarding requirejs amd modules I used to have a speed over memory strategy: The heart of my web app navigation is in my only router object. If the user selects a "page"/feature for the first time, I load the amd module (it's a backbone.js view object) for it and all its dependencies with the require command and store this resulting view object (with its model object) for later use in an array in the router object. When the user comes back, I take the the stored view object and re-render the view.

I guess I will switch from this behaviour also into always reloading the module (from cache), but I am unsure.

In order to go the best way, I want to get a better understanding and want to ask 2 questions:

1. I have 5 AMD modules. When the user needs a feature, I load and execute a module and get a backbone.js view object as a result, which I store in an array in my router object. Every AMD module has Backbone.js (AMD version) as a dependency. When the user has visited all 5 "pages" and all my 5 view objects are stored in my array, do I have 5 copies of backbone.js in my browser memory since every backbone.js dependency is fetched from cache and executed anew, or has the garbage collector removed it?
2. How do other web application developer think about this speed over memory strategy?

CONTINUED Today I found a similar question on stackoverflow (http://stackoverflow.com/questions/7866971/how-does-amd-specifically-requirejs-handle-dependancies-across-multiple-module). The answer was: "It will only be loaded once, both of the above modules will get the same module value ...".

So it seems that it is not so bad to store the results of already loaded+executed amd modules for later use.

Wolfgang

Answer 1

Cache everything (that might be used more than once) . (write to Canvas/ImageData). You should only have 1 copy of the framework in memory. If you're concerned there's more, rewrite it to force all AMDs to use a single source Backbone.

Memory is speed.

If you want better speed:

• extern your js files for browser caching.
• Use localstorage
• Do most computation at the user
• Minimize the server and streamline request flow