Hi there,

In my series of  'Performance with ASP.NET AJAX & Client Repeater Control', which I started last week, it's time for part 2, namely: Performance with ASP.NET AJAX & Client Repeater Control - Part 2 - Using StringBuilder.

These are the following articles that I will soon be writing about or already have written about:

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

• 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

Things in this solution are a little bit different compared to the Server side Repeater control and updatepanel approach.

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. Invoking the webservice from client script
4. Cathing the results and build a client repeater using the StringBuilder.

So this is how initially my page looks:

When invoking the 'Generate data button', a client side script is invoked, that on its turn will call the local webservice, which was referenced as a script resource in the scriptmanager. The local webservice is called that returns the 3000 person records (I wanted a large resultset, so you could see that the performance issues arise when using an updatepanel as in my previous post). When the data was retrieved from the local webservice it is handled in client script by making use of the StringBuilder (from the AJAX library Sys.StringBuilder).

This is the call to the local webservice:

PersonService.GeneratePersons(onSuccess, onFailed);

This is the javascript used to make up the table:

function BuildTable(results) {
            var sb = new Sys.StringBuilder();
            sb.append('<table><tbody>');
            sb.append("<tr>");
            sb.append("<td width='100px' valign='top' align='left'>Id</td>");
            sb.append("<td width='100px' valign='top' align='left'>Name</td>");
            sb.append("<td width='100px' valign='top' align='left'>Lastname</td>");
            sb.append("<td width='100px' valign='top' align='left'>Age</td>");
            sb.append("<td width='100px' valign='top' align='left'>Blog</td>");
            sb.append("</tr>");
           
            for (var Person in results) {
                sb.append('<tr>');
                sb.append("<td id='id' width='100px' valign='top' align='left'>");
                sb.append(results[Person].id);
                sb.append('</td>');
                sb.append("<td id='name' width='100px' valign='top' align='left'>");
                sb.append(results[Person].name);
                sb.append('</td>');
                sb.append("<td id='lastname' width='100px' valign='top' align='left'>");
                sb.append(results[Person].lastname);
                sb.append('</td>');
                sb.append("<td id='age' width='100px' valign='top' align='left'>");
                sb.append(results[Person].age);
                sb.append('</td>');
                sb.append("<td id='blog' width='100px' valign='top' align='left'>");
                sb.append(results[Person].blog);
                sb.append('</td>');
                sb.append('</tr>');
            }
            sb.append('</tbody></table>');

            $get('clientrepeater').innerHTML = sb.toString();

        }

So looking at the following results you'll see the benefit of using the client side StringBuilder compared to the server-side Repeater variant in combination with the updatepanel, at least the benefit in consistency:

REQUEST 1 - The Updatepanel:   1531 miliseconds

REQUEST 2 - The Updatepanel:   8469 miliseconds

REQUEST 3 - The Updatepanel:   8672 miliseconds

REQUEST 4 - The Updatepanel:   8437 miliseconds

REQUEST 5 - The Updatepanel:   8766 miliseconds    

REQUEST 1 - StringBuilder:    6562 miliseconds

REQUEST 2 - StringBuilder:    6859 miliseconds

REQUEST 3 - StringBuilder:    6781 miliseconds

REQUEST 4 - StringBuilder:    6938 miliseconds

REQUEST 5 - StringBuilder:    6906 miliseconds

So overall there's a 1,5 seconds performance gain when using the stringBuilder at the client compared to a Server-side Repeater control with the updatepanel. The strange thing however is the 500% performance gain the first time, when using the Updatepanel.

Very strange things happen here!!! .

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

AjaxPerformance - StringBuilder.zip (7,22 kb)

Hope this is usefull!

gr,

Robbert