jquery Ajax optimization tips - MVC

Question

I am currently trying to convert a controller action into Ajax requests in order to let the page load in sections rather than all at once. Before I started making changes, the page loaded in about 8 seconds (it has to process a lot of information).

Since I've changed it to loading up Partial Views via ajax, the page now takes about 35 seconds to load up the same information.

The process is as follows:

• The initial request processes and then returns a viewmodel (a generic list) as json
• I then use the returned data to create two partial views

I just wonder if there is a better way of laying out the jquery to get it to work faster. I'm aware the amount of data being passed could be a factor - although I can't find the exact size of the object in the debugger, when I dump the json out to a text file it is about 70kb.

jQuery

$.ajax({
    type: 'GET',
    dataType: "json",
    url: '@Url.Action("GetMapDetails")',
    success: function (data) {
        $.ajax({
            type: 'POST',
            contentType: 'application/json',
            url: '@Url.Action("GetMapItems")',
            data: JSON.stringify({
                list: data
            }),
            success: function (result) {
                $("#mapContainer").html(result);
            }
        });
        $.ajax({
            type: 'POST',
            contentType: 'application/json',
            url: '@Url.Action("GetAreaPoints")',
            data: JSON.stringify({
                list: data
            }),
            success: function (result) {
                $("#areaPointsContainer").html(result);
            }
        });
    }
});

Controller

public JsonResult GetMapDetails()
{
    List<ViewModel> vm = new List<ViewModel>();

    //create viewmodel here 

    return Json(vm.ToArray(), JsonRequestBehavior.AllowGet);
}
public ActionResult GetMapItems(List<ViewModel> list)
{
    return PartialView("_MapItemsPartial", list);
}

public PartialViewResult GetAreaPoints(List<ViewModel> list)
{
    return PartialView("_AreaPointsPartial", list);
}

If anyone can offer some optimization advice, that would be great thanks

Answer 1

You could look into rendering partial views into strings. That way you could return both HTML strings from GetMapDetails, and you'd be able to achieve the same result in one AJAX call instead of three.

If would also rid you the need of serializing the viewmodel back and forth, so there might be some performance gain there.

Answer 2

Also try to use $.ajax cache option to true to improve further calls jQuery ajax method

I assume that infomation don't change fast then it would improve the performance.

For example I work with statistics pages loading asynchronously 7-8 plots there cache saves me a lot of time.

From jQuery Api:

On the other hand if the posted data content changes fast it's not recommended to cache it but also take into account that EVERY browser caches that request in it's own cache. To avoid browsers caching use timestamps on every request as query strings just as $.ajax does automatically.

Answer 3

Since I think that your goal is to be able to load partial views only when they are needed, putting them all in one markup string isn't going to work.

The performance problem you are having is probably due to the fact that ajax-calls are indeed more performance expensive then to load a result stream from a server.

Caching will only help when you retrieve the same data into the same page - not your case either.

From what it seems to me, you should load up the initial view to the user, and immediately start background pre-loading of the views you are probably going to need soon. Just placing them onto the DOM as an indivisible elements, so one requested, they will be immediately loaded. Of course you pre-load only those which you are most likely to need soon.

Other, probably more effective way, would be to use an MVVM framework on the client, like KnockoutJS. Define your views in a simple html markup, without the actual need for the server to render the partial view with the model. This would allow an html to transfer faster. Separate REST calls from your client would be retrieving only the model data from the server in JSON format, and you will apply data binding to the view (lightweight html you've loaded previously). This way the burden of heavy-rendering will be on the client and the server will be able to service more clients in a long run + you are most likely to get the performance gain.

Answer 4

Install the Stackexchange Miniprofiler and hook it into your database requests as well, this will help you find which bit is taking the most time. I suspect it could well be your data and processing on the server (depending on how you have written your controller you could be hitting your data load+process 4 times in the AJAX version, resulting in the 4 times page load).

If this is true then the problem is not going to be fixed by AJAXing your page but caching the processed data on the server (to keep it up to date your choices are a short cache duration or have the process that updates your data remove the cache, the correct answer depends on what your data is).