Single page web application concerns

Question

The situation

I am prototyping a web application of several pages, some of them with serious JavaScript load. I had the (not very original) idea of making the page layout load once, and only change the contents with ajax requests. This can be done, and it works nice, but I have some concerns.

The site check every request it gets, and if it is an AJAX request, it returns only the content (as an MVC 4 partial view, but that is not exactly the point, this can be done anywhere.) Otherwise, it loads the whole page, with layout, and everything. The idea is to have something like a status flag for each javascript bundle I'm downloading. The layout would have an initializing js file, containing the basic display logic of the page, how to get the contents, etc.

All the content pages would check, if their relevant scripts are loaded, if not, then initiate the download, and in the success event, set the correct flag. Some extra error-handling is required, for cases, when the ajax call fails for some reason.

The Question(s)

Now my concern is, there is quite much JS on some "subpages". Since I have to be able to work on mobile browsers (altough the most js-heavy stuff is desktop only, but let's forget that for a minute), how will it impact performance, if I have like several MB-s of scripts loaded in memory, and "never" unloading them (since the page is not reloaded). Also, will the scripts be cached, if I get them via the jQuery.getScript(...) function? Or should I load the scripts another way?

Same question for content. If I remove the DOM elements from the body, replace them with other elements, then reload the original subpage, what will that do with memory usage, and performance, during a long period of usage?

I would really like to have someone experienced in this field give me some insight on my concerns, before I make myself look completely stupid with a useless proof-of-concept prototype.

Thanks in advance!

EDIT: Changed title to proper expression

EDIT 2: Separated what is the question, and what is the context

Answer 1

We have developed a similar application a while ago and we decided for that application to make each AJAX-heavy page a separate page. There are approx. 6-8 pages and each of them has very different responsibilities, so you could think of this as having 6-8 independent single page applications.

There are two approaches that I can think of, for your case:

1. If your pages are truly JavaScript-heavy and each of them requires very different sets of scripts, the performance you would gain by not reloading the page layout would probably be lost by the amount of stuff you would load all the time.
   Especially for poorly written JavaScript where the garbage starts eating your memory it's not bad to reload the whole page every now and then to take out the trash.
2. If the JavaScript used by the pages is pretty much the same (or; has only minor differences), I'd suggest to bundle every script of all the pages into one and load the bundled script.
   In this case though, you might get into a situation when the full page is never reloaded, so do take the effort to write js that doesn't leak your memory.

If your server side can handle cache-controlling HTTP headers correctly then yes, no matter how you load a particular resource, caching will work. Still, I'd recommend bundling your scripts into one and not bothering to load them one-by-one.
By doing that, you will have saved a bunch of HTTP requests and because the browser will cache the bundled script, you will also save bandwidth later.

About attaching/removing elements from the DOM:
jQuery automatically gets rid of all event handlers and data() when you use remove() or empty(). It only retains them if you use detach().

More about JavaScript and memory consumption

Here are some articles on the topic that are worth reading.

• http://nesj.net/blog/2012/04/javascript-memory-leaks/
• http://www.javascriptkit.com/javatutors/closuresleak/index.shtml
• http://www.ibm.com/developerworks/library/wa-jsmemory/index.html
• http://www.infoworld.com/d/application-development/brendan-eich-tells-how-prevent-javascript-memory-leaks-210974

Answer 2

Sounds like you're attempting to build a SPA!

There are a few frameworks / libraries out there which are designed to aid the build and design of such applications, a by-no-means-exhaustive-list of which is:

• backbonejs - see also backbone tutorials
• angularjs
• knockoutjs

Often applications utilizing these frameworks will also use something like requirejs to help modularize and only load in resources as they're needed.

There are a lot of options out there, but I suggest you run through a few tutorials and see if there's one which fits your needs - good luck! :)

There are also a couple of relevant tutorial videos on pluralsight, relating to their use with .NET MVC 4 and Web API. You need a membership, but I think you can sign up for a free trial -

Single Page Apps with HTML5, Web API, Knockout and jQuery

Building a Site with Bootstrap, AngularJS, ASP.NET, EF and Azure

Updated:

To address your performance concerns - There's some interesting information about profiling memory performance - Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools worth reading if only for the first picture.

Additionally, Writing Fast, Memory-Efficient JavaScript, has some good points as to regarding memory use:

To give the garbage collector a chance to collect as many objects as possible as early as possible, don’t hold on to objects you no longer need.

Finally, although backbone specific, Backbone.js And JavaScript Garbage Collection gives a good summary of

basic ideas [that] should prove useful to people who want to do a better job of managing memory usage in JavaScript.

Which in turn references this answer: What does backbone.js do with models that are not used anymore