Slow performance when simultaneously launching jQuery .load

Question

Occasionally my app needs to populate multiple content areas via simultaneous jQuery .load() calls.

Despite the content areas loading in under 100ms, the more simultaneous requests in place, the slower the content is displayed on the document. Sometimes this can be as long as 10-15 seconds for 6 content areas.

Loads are initiated as follows:

$("#MyDiv1").load("/My/Controller/Action/1");
$("#MyDiv2").load("/My/Controller/Action/2");
$("#MyDiv3").load("/My/Controller/Action/3");
...

Any suggestions on how to combat this bottleneck would be appreciated.

Answer 1

ASP.NET handles one request at a time under the same Session. So the second request won't run until the first one has completed. That's to avoid threading issues. You should see some improvement if you use Sessionless controllers.

Check out this link:

What are some scenario's of having a Session-less Controller in ASP.NET MVC3?

Answer 2

Thats because of the way javascript works. It wont wait to finish loading content 1 before it starts to load content 2 and 3 so it will all start to load at the same time.. So you should create some kind of que.

something like:

load array = new array()
array[array.length+1]= "/My/Controller/Action/1";  
array[array.length+1]= "/My/Controller/Action/2";  
array[array.length+1]= "/My/Controller/Action/3";  
loadContent();   
function loadContent()    
{
$("#MyDiv").load(array[0] function(){
        array.shift();
       if(array.length>0)
          loadContent() ; 
    });
}

note that is is not tested but it should give you a good ideer of what you can do

Answer 3

Try to cascade the calls

$('#div1').load('...', function() {
    $('#div2').load('...', function() {
        $('#div3').load('...', function() {
            ....
        });
    });
});