Hi there,

I've recently been struggling with performance issues while implementing an ASP.NET Repeater control with a large resultset (more than 1000 records binded to it) and especially this in combination with ASP.NET AJAX.  I was heavilly suffering from performance issues, a lot of times my browser really frozes during asynchronous postbacks. Add to that a serious performance requirement that data should load within 1,5 seconds I soon figured out that a solution with and UpdatePanel, an ASP.NET Repeater server Control wasn't going to do it for me.

After reading Dave Ward's post on 'Use jQuery and ASP.NET AJAX to build a client side Repeater' I decided to rewrite my code to built a client-side repeater. During the development time that went into it, I'd tried multiple ways to achieve my goal, namely: Good Performance!

After my thorough investigation I thought it was my obligation to write some post about it and show you the different performances that I discovered. so I decided I was going to write a couple of articles on it. In this first article I will show you the following:

Performance with ASP.NET AJAX & Repeater Server Control - Part 1 - The Updatepanel

These are the following articles that I will soon be writing about.

  • Performance with ASP.NET AJAX & Client Repeater Control - Part 2 - Using StringBuilder
  • Performance with ASP.NET AJAX & Client Repeater Control - Part 3 - DOM Create element
  • Performance with ASP.NET AJAX & Client Repeater Control - Part 4 - String Concatenation

But first this article!

These are the things I have done (which can be seen when you download the source files below):

  1. Setting up a page with a generate data button to retrieve a set of 3000 person records
  2. Setting up a local webservice that will get the data (could have been a PageMethod).
  3. Adding an updatepanel to the page, in which the repeater was wrapped
  4. Adding progress indication during the asynchronous loading operation.
  5. Using client side script to show the loading time in milliseconds.

 

So this is how initially my page looks:

When invoking the 'Generate data button', the eventhandler behind the button will fire. A local webservice is called that returns the 3000 person records (I wanted a large resultset, since then you really see how the performance issues rise when using an updatepanel). In this article I don't to go into the discussion that this should never be done, that the design is wrong and there should never be a reason for retrieving such a large resultset, and you should make use of paging. That is NOT what this article is about!!!. Anyway when the data was retrieved from the local webservice and bounded server-side to the ASP.NET Repeater Server Control, the UpdatePanel will do it's work. See below that the ProgressTemplate is shown during the asynchronous postback. 



And when the UpdatePanel is finished the results are shown:



The following javascript will output the time in milliseconds that the asynchronous postback took.

 <script language="javascript" type="text/javascript">
        var startdate;
        var enddate;

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(beginRequestHandler);
        prm.add_endRequest(endRequestHandler);

        function beginRequestHandler() {
            startdate = new Date();
        }

        function endRequestHandler() {
            enddate = new Date();
            $get('<%= this.loadingTimeInMilliseconds.ClientID %>').innerHTML = enddate - startdate;
        }
   
    </script>

Notice that the first update took only 1985 milliseconds (nearly 2 seconds), But hit the 'Generate Button' more frequently!!! You'll see a couple of times a freeze of the ajax loading animation. Sometimes it took about 10 seconds to load the 3000 records (see screenshot below)!!!! whaaaa Tongue out. A serious performance issue, which Dave Ward already mentioned about before



If you want to take a look for yourself, you can find the source code here (VS 2008, .NET Framework 3.5):

AjaxPerformance - The UpdatePanel.zip (5,57 kb)

I hope that this really alerts you to be carefull using the ASP.NET Repeater Server Control in combination with an UpdatePanel when you need to bind a large resultset! I'm looking forward to hear suggestions, while I'll continue to write the next series of articles.

Hope this is usefull!

gr,

Robbert