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  
}