异步回发后性能下降-滚动变得可怕 [英] Performance deteriorating after async postback - scrolling becomes horrendous

问题描述

我的任务是帮助改善不幸地使用updatepanels的asp.net(4.5)Web窗体应用程序的性能. 它们确实很邪恶.但是要摆脱它们并不是那么简单，因为系统很简单.绑在一大堆东西上.我已经摆脱了一些不必要的更新面板.

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.

无论如何，这是一个CRM类型的系统，因此，想象一下您转到某个说客户的详细信息页面.在客户的此详细信息页面中，您具有一些常规的客户信息.页面底部有标签.例如，客户详细信息页面上可以有用于该客户的联系人"选项卡，该客户销售的产品"，该客户的评分"等选项卡.这些选项卡中的每个选项卡基本上都是一个div，并且环绕在其周围是一个更新面板.最初仅加载第一个选项卡.当您单击选项卡时，将进行异步调用，该调用将在选项卡中加载数据.因此，基本上您的页面看起来像这样:伪代码:

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

上述选项卡是div，基本上是jquery选项卡.最初，我注意到页面上的每个更新面板的updatemode都设置为always.当我需要更新面板进行更新时，我立即将updatemode更改为conditional并显式调用了Update().很小的改进.然后，我注意到初始更新面板(用于整个页面的面板)的ChildrenAsTrigger属性设置为true ...所以我将其更改为false.很小的改进.

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.

然后，我再次开始测试页面，以查看性能如何……仍然非常糟糕.实际上，当页面首次加载且第一个选项卡加载时，页面速度非常快.当我单击另一个选项卡时(它通过调用隐藏按钮服务器端事件来加载数据，通过异步过程加载子面板数据).因此，这绝对不是真正的ajax，但是嘿，这是我们拥有的.因此，基本上，服务器端事件只是将一些数据绑定到该选项卡上的网格.获取数据的性能绝对不错-这不是我的问题.

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.

现在我的问题是，当我上下滚动页面时，性能开始下降.一旦我单击另一个选项卡或另一个2-3个不同的选项卡，获取数据的性能仍然很棒.滚动条有时会​​跳，因为它跟不上我想导航页面的速度.

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.

除了完全转储updatepanels之外，我不知道该怎么做才能加快此页面的速度，但是这样做的时间和精力太多.到目前为止，我已经尝试了以下方法:

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:

• 消除了不必要的更新面板
• 将更新模式从always更改为conditional
• 将childrenastriggers更改为false
• 在asp.net/js端尽可能修复了所有错误/已对其进行了优化

• 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

我该怎么办才能解决此问题，否则还会导致缓慢的延迟?如前所述，数据的获取非常快，当我上下移动(滚动)页面时，它的内容非常混乱. 我遵循了msdn关于更新刷新面板的建议

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.

我仍在努力寻找一种更好的方法.我尝试使用此:

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

这允许我在服务器端处理视图状态.效果是html标记已经摆脱了所有视图状态信息，但是，我仍然没有解决的问题是，由于我继续通过页面上的触发事件执行异步回发，因此我的页面变慢了.减速的意思是当我向上/向下滚动页面时，性能确实很差.滚动条在我滚动时必须基本赶上我.因此，即使摆脱了客户端页面上生成的viewstate信息，我仍然遇到滚动条非常慢的问题.再次发生这种情况是由于页面上的事件(例如，过滤器/单击事件或网格上的排序或页面索引发生更改)(基本上是引起异步回发的任何原因).

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.

推荐答案

好了，我终于开始工作了……这个问题与我在这里找到的另一个最近的问题有关:

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?

要点是，我正在订阅更新面板之外的控件上的事件.实际上，根据我在jquery中的重新订阅，将n个事件加倍，加倍或加倍.看到我发布的链接.

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.

这篇关于异步回发后性能下降-滚动变得可怕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！