title: Performance deteriorating after async postback - scrolling becomes horrendous
body: <p>I've been tasked to help improve performance on an asp.net (4.5) webforms application that unfortunately uses updatepanels.  <a href="http://encosia.com/why-aspnet-ajax-updatepanels-are-dangerous/">They are really evil.</a>  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.</p>
  
  <p>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:</p>
  
  <pre><code>updatepanel for entire page
    html  
  
    &lt;!-- tabs --&gt;
  
    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
  </code></pre>
  
  <p>The tabs as mentioned are divs and are basically jquery tabs.  At first I noticed every single update panel on the page had its <code>updatemode</code> set to <code>always</code>.  I immediately changed the <code>updatemode</code> to <code>conditional</code> and explicitly called <code>Update()</code> 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 <code>ChildrenAsTrigger</code> property set to true...so I changed that to false.  Very small improvement.  </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <ul>
  <li>eliminated as many update panels as what was not needed</li>
  <li>changed update mode from <code>always</code> to <code>conditional</code></li>
  <li>changed <code>childrenastriggers</code> to <code>false</code></li>
  <li>fixed any bugs / optimized as much as I could on the asp.net / js side</li>
  </ul>
  
  <p>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.  <a href="https://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel(v=vs.110).aspx#refreshing_updatepanel_content">I followed msdn's recommendation for how update panels refresh.</a></p>
  
  <h1>Edit Update</h1>
  
  <p>I am still working on this to try to figure out a better way.  I tried using this:</p>
  
  <p><a href="http://aspadvice.com/blogs/robertb/archive/2005/11/16/13835.aspx">http://aspadvice.com/blogs/robertb/archive/2005/11/16/13835.aspx</a></p>
  
  <p>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).</p>
  
  <p>If anyone has additional ideas feel free to chime in.</p>