Slow performance of a GridView inside an UpdatePanel

  • Article

Here is an interesting problem we ran into recently.  The customer had a large GridView that was being updated by AJAX inside on UpdatePanel and seeing bad performance.

The reason is that the Client-Side Javascript has to walk the entire DOM of the Content of the UpdatePanel to tear down the HTML DOM as the Page goes through an Asynchronous update.

First Solution

To alleviate the Expensive Stack Walks to destroy DOM Elements and its related Time Delay, the developers suggested that we remove the Unnecessary payload from the DOM of the UpdatePanel during an Asynch Postback.

The Way you would implement this is to:

1. Hook up an Event handler to the beginRequest Event .

EX:

 <script language ="javascript" type ="text/javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(clearDisposableItems)
</script>

2. Destroy an DOM Elements that you don’t want the Framework to tear down by tearing it down manually.

EX:

 function clearDisposableItems( sender , args ) {
  if (Sys.Browser.agent == Sys.Browser.InternetExplorer ) {
    $get('<%=GridViewID.ClientID%>').tBodies[0].removeNode(true);
  } else {
    $get('<%=GridViewID.ClientID%>').innerHTML="";
  }
}

This gave us a slight decrease in the time taken for async Updates, about 3 seconds less.  But, we are still far away from the optimal turn-around time of a few seconds.

In a sample that I setup on my machine using about 500 rows in a GridView,  the turn-around times were in the order of sub-seconds when the GridView had text labels instead of textboxes.

When I changed the text labels to textboxes, there was an exponential jump in the time taken to process the Form even before the request was submitted to the Server.

Sub-second response times changed to 25 seconds!!

The main reason for this slow-down is due to the number of Controls that are present in the Grid.  We cannot optimize the Javascript to give good performance in this scenario.

Alternative methods

So what can we do if we need a GridView with controls?  Well, the best suggestions are:

  • Enable paging to allow the control to stay smaller but still give all the information required.
  • Change the UI to allow for an optimal number of rows that give acceptable performance.