Use AJAX or Multithreading to speed up Page load

Question

I have a page that has 5 sections. Each section takes about 1 second to render.

Page_Load()
{
   RenderSection1();  //1 sec
   RenderSection2();  //1 sec
   RenderSection3();  //1 sec
   RenderSection4();  //1 sec                  
   RenderSection5();  //1 sec
}

I would like to speed up the loading of this page. But at the same time make sure that it don't slow down performance of other parts of web application and also do not crash the IIS.

The are several approaches:

1. Use AJAX requests. Needs to be MVC style requests to Controller or Web Service.
   Using UpdatePanel around each section will not work - since if I try to submit refreshes to multiple UpdatePanels at the same time using approach here: http://encosia.com/2007/07/13/easily-refresh-an-updatepanel-using-javascript/, the last request will always win: http://www.codeproject.com/Tips/57035/Simultanious-Async-Requests-Using-Multiple-Update-.aspx

2. Use ASP.NET threads described in answer to right way to create thread in ASP.NET web application. So I would use a separate thread for each call: RenderSection1, RenderSection2, etc...

3. Move the logic that takes up time, usually DB requests, into Application Service class in another DLL or External Web Service. Something like

OrderDTO GetDataForViewOrder(int orderID)
{
}

and use multiple threads in that DLL. This approach seems to provide the best scalability, but also introduces UI details into Application Services layer.

Which approach do you think is the best and why?

Answer 1

ajax.

Threading doesn't help much since the whole page needs to wait on all threads to complete. And it's unlikely that it's ASP.NET itself that takes time. It's more probable that it's your database or something else. Threads will also add more complexity to your application without gaining much from it. Only use threads in web apps to perform maintenance tasks and such, everything else can be solved using ASP.Net.

Using ajax let's you return the main page quickly and all sections will be rendered as soon as they get a result back from the ajax request.

Answer 2

While threads can help with a single page loads (provided that your server has at least 5 CPU cores) it is not scalable approach. What if 3 users hit the app at the same time? Then you will need 15 cores on the server to achieve the performance boost.

AJAX can be a solution but it suffers from the same scalability issues because each AJAX request will get its own thread. On the bright side AJAX gives a preceived speed improvements for the end user because he can see something is loading even if the laggy parts of the page take the same time.

Wha you really need to look at if the performance hit comes from a database is asynchronous DB queries. You can start 5 asynchronous calls for the 5 parts of the page and reduce the load time potentially up to 5 times. It will make the code more complex though. Also if you are chosing to combine this with the AJAX approach you need to look at asynchronous ASP.NET pages or asynchronous WCF services to avoid scalability problems when there are a lot of users because every user will take up 5 threads.

The code for async calls would roughly look like this:

Page_Load()  
{
     BeginDBRequest1();
     BeginDBRequest2();
     BeginDBRequest3();
     BeginDBRequest4();
     BeginDBRequest5();
     data1 = EndDBRequest1();
     data2 = EndDBRequest2();
     data3 = EndDBRequest3();
     data4 = EndDBRequest4();
     data5 = EndDBRequest5();

     //all of the above calls take the time of the max time call and not the sum of the times

     RenderSection1(data1);  //1 sec
     RenderSection2(data2);  //1 sec
     RenderSection3(data3);  //1 sec
     RenderSection4(data4);  //1 sec
     RenderSection5(data5);  //1 sec  
} 

Answer 3

One option is you can use asynchronous page load. But this is all in the server side processing. Essentially you are registering those tasks to execute asynchronously and waiting for them to complete. So the http request which gets sent will wait until all the tasks are completed.

The 2nd option is ajax. The benefit here is the page loads quickly. However it doesn't really work with update panels. Go for the notion of classic ajax, and not asp.net ajax. Using libraries like jQuery will help a lot. You can make ajax calls to all five sections once the page loads. You'll have to write code for returning content for all those 5 sections.

Of course ideally ajax requests makes sense if the urls are mvc style. But in my opinion asp.net handlers comes close to those mvc style requests, in a very small way.

Answer 4

As mentioned in the other answers, using ajax is the way to go -- but consider this if speed is what you are after:

1. have ajax get that section from a static file that holds that HTML content (keep reading to understand the concept)

2. have ajax after that get the section from the server dynamically

3. compare the dynamic result with the static content

4. is it the same, all is good, nothing more to do --- is it different: update the content on the page and save it as static content for the next time that content is needed

Answer 5

is possible make multithreading with ajax to fastcgi server controling the proccess, you can see in this video https://youtube.com/watch?v=Q-Afi6EB1Lc record desktop and youtube-dl proccess handle from localhost using ajax ang can give intervaltime, loop, and buffer to the threads,

for ajax thread the simply function prototype is:

$ajax = new Array();

function ajax(object,auto=$ajax.length){

$ajax[auto] = new XMLHttpRequest()

.... /* make in readyState = 4 ; $ajax[auto] = false ; for free browser memory XHR object */

}

//then it would be...

insofXHR = {

location:"file.ext", method: .... etc

}

ajax(insofXHR)

/*

If you can a specific handle : ajax(insofXHR,'MY_HANDLE')

now $ajax['MY_HANDLE'] is a pointer to specific XHR object

*/

/* This making Ajax threading and with fastcgi is very good */

/* A example with ffmpeg ands hls

https://youtube.com/watch?v=gKtPmFcGD-Q
    */