javascripthtmljqueryajax

Single page web application concerns

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.

EDIT: Changed title to proper expression

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

Solution

  • 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.