How to reduce/eliminate wait time/latency in AJAX request

Question

I have a ASP.NET MVC3 project where the main aspx page is doing a dynamic loading for its parts using jQuery ajax. So basically when the site loads, it hits /Home/Index and then within Index (aspx) view, there are several lines of jQuery that make ajax calls (to /Home/PartOne and /Home/PartTwo to populate parts of the page.

So every time the page loads, it basically is doing 3 requests: to get index, to get PartOne, and then PartTwo.

The question: Why is there some kind of "wait" time for the the third request to execute? I thought this was the browser concurrent request limit, but why isn't it executing after the 1st request is done?

When I experimentally put "OutputCache" attribute on "PartTwo", it behaves as expected, that it was executing fast. This hints that the problem is not in IIS, but somewhere after that and before it hits my action method.

Here is a screen shot from Chrome network profiler:

Here is a screen shot on the MvcMiniProfiler - look at the 3rd row/value, it is waiting for 500ms before executing my controller's action code.

My controller code looks like this. Although I snipped the actual code, but code for PartTwo is very trivial (no long computation, no db calls, etc):

public class HomeController : Controller {
    public ActionResult Index() {
        // do something here
        return View();
    }

    public ActionResult PartOne() {
        // do something here
        return View();
    }

    public ActionResult PartTwo() {
        // do something here
        return View();
    }
}

My javascript:

$(document).ready(function () {
    $.ajax({
        url: "/Home/PartOne",
        cache: false,
        success: function (data, textStatus, request) {
            $("#TestContainerOne").html(data);
        }
    });

    $.ajax({
        url: "/Home/PartTwo",
        cache: false,
        success: function (data, textStatus, request) {
            $("#TestContainerTwo").html(data);
        }
    });
});

My index.aspx:

<h2>Home page</h2>    
<div id="TestContainerOne"></div>
<div id="TestContainerTwo"></div>

PartOne.ascx:

<h2>Part One</h2>

PartTwo.ascx:

<h2>Part Two</h2>

Help?

Answer 1

You should use read only session state or disable it completely in order to get parallel processing of Ajax requests. By default the server locks the session state for requests coming from the same client, so the requests are executed sequential.

This is done by decorating your controller with the SessionState attribute:

[SessionState(System.Web.SessionState.SessionStateBehavior.ReadOnly)]
public class HomeController : Controller {
    public ActionResult Index() {
        // do something here
        return View();
    }

    public ActionResult PartOne() {
        // do something here
        return View();
    }

    public ActionResult PartTwo() {
        // do something here
        return View();
    }
}