Performance deteriorating after async postback - scrolling becomes horrendous

Question

I've been tasked to help improve performance on an asp.net (4.5) webforms application that unfortunately uses updatepanels. They are really evil. But getting rid of them isn't so simple as the system is tied up to a whole slew of things. I've been able to get rid of some of the update panels that were unnecessary.

In any event this is a CRM type system so imagine you go to a details page of say a customer. Inside this details page of a customer you have some general customer info. At the bottom of the page there are tabs. For instance, a customer details page can have tabs for "Contacts" that work for that customer, "Products" that the customer sells, "Ratings" for the customer..etc. Each one of these tabs is basically a div and wrapped around it is an update panel. Initially only the first tab is loaded. As you click the tab an async call is made which loads the tab with data. So basically you have a page that looks something like this: pseudocode:

updatepanel for entire page
  html  

  <!-- tabs -->

  updatepanel for contacts sub panel
     contacts html
  /updatepanel

  updatepanel for products sub panel
     products html
  /update panel

  updatepanel for ratings sub panel
     ratings html
  /update panel

/updatepanel end the entire page

The tabs as mentioned are divs and are basically jquery tabs. At first I noticed every single update panel on the page had its updatemode set to always. I immediately changed the updatemode to conditional and explicitly called Update() when I needed the update panel to update. A very small improvement. I then noticed the initial update panel (the one used for the entire page) had its ChildrenAsTrigger property set to true...so I changed that to false. Very small improvement.

I then began testing the page again to see how performance was...still very crappy. In fact when the page first loads and the first tab loads the page is very fast. When I click on another tab (it loads the sub panel data via an async process by calling a hidden button server side event to load the data). So this is definitely not true ajax but hey its what we have. So basically the server side event simply binds some data to a grid on that tab. Performance of getting the data is absolutely fine - that is not my issue.

My issue is now as I scroll up and down the page performance is starting to degrade. Once I click on another tab or another 2-3 different tabs performance of getting the data is still awesome..but after I get the data and I scroll the page its horrendous. The scroll bar even jumps at times as it cant keep up with how fast I want to navigate the page.

I don't know what else to do to speed up this page aside from dumping the updatepanels completely however there is way too much work and time to do this. So far I have tried the following:

• eliminated as many update panels as what was not needed
• changed update mode from always to conditional
• changed childrenastriggers to false
• fixed any bugs / optimized as much as I could on the asp.net / js side

What else can I do to fix this or what else could be causing the slow delay? As mentioned the getting of the data is very fast, its when I move up and down (scroll) the page is what is very choppy. I followed msdn's recommendation for how update panels refresh.

Edit Update

I am still working on this to try to figure out a better way. I tried using this:

http://aspadvice.com/blogs/robertb/archive/2005/11/16/13835.aspx

Which allows me to treat the view state on the server side. The effect is the html markup has gotten rid of all the view state info however, the issue I still have that has not been solved is the fact that as I continue to do async postbacks by trigger events on the page my page slows down. What I mean by slows down is as I scroll up / down the page the performance is really bad. The scroll bar has to basically catch up with me as I scroll. So even getting rid of the generated viewstate info on the client side page I am still running into the issue that the scroll bar is very slow. This again happens due to events on the page such as a filter / click event or a sort or a page index change on a grid (basically anything that causes an async postback).

If anyone has additional ideas feel free to chime in.

Answer 1

Well finally I got this working...the issue was related to another recent question I had found here: Why is telling jQuery to click my link button slowing my page down?

The gist of it was that I was subscribing events on controls that were outside of my update panel. In effect, doubling, tripling, or attaching n events based on resubscribing in my jquery. See my link posted.