Speed up rendering in Single Page Application (SPA)

Question

So I am working on a single application that uses web services on the back-end to send JSON payloads, which are then rendered on the client via a proprietary Javascript MVC framework.

In our particular application, we have a multi-page form wizard. All the pages are customizable, so we have to send all the layout information as well as the data to populate it. Templates are stored in html and then on the client-side they are removed from the DOM and cached for re-use.

The thing that is different here from what I have generally seen, is that all the data for the entire form is loaded in a single Ajax call and then everything is rendered before the app becomes responsive. This can take (depending on the size of the setup) 5, 10, 20 seconds.

Once the form is loaded everything is lightning quick and works brilliantly. You can get through the entire thing without waiting once. Then when you get to the end and submit, it can also take 10-20 seconds for the ajax call to come back and show the confirmation. This is because we don't really send anything to the server as we go along, we save it all at the end.

So to recap:

Get huge JSON payload (wait) > render everything (wait) > user completes form (all client side) > user submits entire form (wait) > confirmation page

The bulk of the time is spent in step 2 render everything.

My ideas for speeding this up were a few:

1) Break up the ajax call. instead of getting the entire form, have an ajax call for each page, send them all off and start rendering that page in it's callback method.

2) Currently everything is rendered on the client side, I am thinking about how we could possibly pre-render some of the page on the server (in a separate thread?) while we are waiting on the data.

For reference, we are in the ASP.NET environment, ASMX web services on the backend and an in-house framework on the client side, we do have jQuery available.

Answer 1

What I would recommend doing is having each 'page' seperate. When you have to fetch the entire page, I would return only the first page, which could include a link to the next page. So your json response could be something like:

{
    "layout":{
        // layout information
    },
    "data": {
        // info to render
    },
    "next_page" : "link/to/next/page"
}

Now when this is returned, render the first page (possibly with a web working, I'll discuss this later), and initiate an AJAX call to the "next_page". Repeat this process for each page until no "next_page" is provided (ie, its the last page).

This will allow subsequent pages to render while then user completes each page.

Web Workers (HTML5 feature)

Web workers allow javascript threads, which can allow you to do the rendering in the background without interfering with the UI loop. To get you started you can take a look at this introduction .

Note that I haven't personally used web workers for anything, but you should be able to use them for large rendering tasks. If you choose to, remember that you'll have to provide some sort of fallback for browsers that don't support them yet.