Slow performance of a GridView inside an UpdatePanel

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.

Comments

• Anonymous
  September 14, 2008
  PingBack from http://informationsfunnywallpaper.cn/?p=5314

• Anonymous
  September 15, 2008
  The comment has been removed

• Anonymous
  September 15, 2008
  do not bring 5 million records and bind to a grid. It has been #1 problem with Datagrid. m$ft never suggest to use filter and possible search capabity to bring small dataset back

• Anonymous
  September 15, 2008
  surely the best option is to return json and just change the td contents rather than rebuild the thing everytime - also save bucket loads of k down the wire

• Anonymous
  September 15, 2008
  Use paging, for instance 100 rows inside update panel with 10 columns happens in under 2 secs.

• Anonymous
  September 15, 2008
  Just use custom pagination when you bind it to your gridview.  So that way you're not fetching every single record upon page change. You can do this with all databases.

• Anonymous
  September 15, 2008
  What could i do if I have update panel in Master Page. And One of My content Page have such type of Gridview? [I know about custom pagination but i can't do that here]

• Anonymous
  September 15, 2008
  You could change the sql query to limit the data coming back at that level.  Or you could find another means for updating it, like caching on the client-side and not using AJAX at all for example.

• Anonymous
  October 15, 2008
  set updatepanel property updatemode="conditional"

• Anonymous
  February 11, 2009
  The comment has been removed

• Anonymous
  February 11, 2009
  Miguel, Thanks for catching that.  I have updated to post to reflect that.

• Anonymous
  March 05, 2009
  It might sound obvious but if your using IE, make sure that you turn off Script Debbuging in your browser's settings. It was taking 80secs to load a table because of that ! Simple, obvious, but I didn't spot that straight away ! Won't fix DOM loading time issue but measures will be realistic though, and I might save you one or two heart attacks ;-)

• Anonymous
  April 07, 2010
  Thanks. Will it also be applicable if GridView is inside a User Control which is used as an ASP.NET web part ?

• Anonymous
  December 13, 2010
  FYI, There appears to be a KB article about this very issue with a script you can add to your page to fix the performance issue. support.microsoft.com Also, they appear to have fixed this issue with asp.net 4.0.  However, I have not verified.  

• Anonymous
  February 01, 2011
  The comment has been removed

• Anonymous
  February 02, 2011
  the fix as provided in the KB article at  support.microsoft.com works for gridview having less than 1000 records.  For gridviews with 3500 rows it still takes 6-8 seconds to Edit. Would anyone know the resolution to quickly Edit a row in the gridiview irrespective of the number of rows ?  the fix seems to help partially but not fully.

• Anonymous
  February 08, 2011
  Aaron Thanks for that bug fix!!! I have been struggling with AJAX UpdatePanels and databound-controls rendering too slow. This fixed my problem and now i can use databound controls without having to reinvent the wheel!!!!

• Anonymous
  May 28, 2012
  this is not helpul yes i use update panel but i need that

• Anonymous
  May 28, 2012
  actually i removed update panel then again load page but its ok problem that too much time consuming paging  5.44 second and with updatepanel 7.86 second