jquery – 异步回发后的性能恶化 – 滚动变得可怕

前端之家收集整理的这篇文章主要介绍了jquery – 异步回发后的性能恶化 – 滚动变得可怕前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的任务是帮助提高不幸的是使用更新面板的asp.net(4.5)webforms应用程序的性能They are really evil.但摆脱它们并不是那么简单,因为系统被捆绑到一大堆东西。我已经能够摆脱一些不需要的更新面板。

无论如何,这是一个CRM类型的系统,所以想象你去一个客户的细节页面。在客户的这个详细信息页面中,您有一些一般的客户信息。页面底部标签。例如,客户详细信息页面可以具有为该客户工作的“联系人”的标签,客户销售的“产品”,客户的“评级”等。这些标签中的每一个基本上都是一个div,并且是一个更新面板。最初只加载了第一个选项卡。当您单击该选项卡时,将使用数据加载选项卡进行异步调用。所以基本上你有一个看起来像这样的页面:伪代码

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更改为条件并显式调用Update()。一个很小的改进。然后,我注意到初始更新面板(用于整个页面的面板)的ChildAsTrigger属性设置为true …因此我将其更改为false。非常小的改善。

然后,我再次开始测试页面,看看性能如何…仍然非常糟糕。事实上,当页面首先加载并且第一个标签加载页面非常快。当我点击另一个选项卡时(通过调用隐藏的按钮服务器端事件来加载数据,通过异步进程加载子面板数据)。所以这绝对不是真正的ajax,但嘿,我们有什么。因此,服务器端事件基本上只是将某些数据绑定到该选项卡上的网格。获取数据的性能是绝对正确的 – 这不是我的问题。

我的问题现在是我向上和向下滚动页面性能开始下降。一旦我点击另一个选项卡或另外2-3个不同的选项卡获取数据的性能仍然很棒。但是当我获取数据后,我滚动页面是可怕的。有时滚动条甚至跳跃,因为它不能跟上我想要浏览页面的速度。

我不知道还要做什么来加速这个页面,除了完全倾销更新面板,但有太多的工作和时间来做到这一点。到目前为止,我已经尝试了以下几点:

>消除了不需要的更新面板
>将更新模式从始终改为有条件
改变了孩子们的错误
>修复任何错误/优化尽可能多的asp.net / js端

还有什么可以解决这个问题,还有什么可能导致缓慢的延迟?如上所述获取数据是非常快的,当我上下移动(滚动)页面是什么是非常波动。 I followed msdn’s recommendation for how update panels refresh.

编辑更新

我仍然在努力找出一个更好的方法。我试过使用这个:

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

这允许我在服务器端处理视图状态。效果是html标记已经摆脱了所有的视图状态信息,但是我仍然没有解决的问题是这样的事实,因为我继续通过页面上的触发事件执行异步回发,我的页面减慢。我的意思是减缓是我向上/向下滚动页面性能是非常糟糕的。当我滚动时,滚动条基本上赶上了我。所以即使在客户端页面上摆脱生成的viewstate信息,我仍然遇到滚动条非常慢的问题。这再次发生在页面上的事件,例如过滤器/点击事件或网格上的排序或页面索引更改(基本上是导致异步回发的任何内容)。

如果有任何人有额外的想法可以自由地呼吸。

解决方法

最后我得到了这个工作…这个问题与另一个最近我在这里找到的问题有关: why is telling jquery to click my link button slowing my page down

其要点是,我在我的更新面板之外的控件上订阅了事件。实际上,根据我的jquery中的重新订阅,加倍,三倍或者附加n个事件。看到我的链接发布。

原文链接:https://www.f2er.com/jquery/183047.html

猜你在找的jQuery相关文章