2

我有一个呈现以编程方式创建的 RadGrid 的 aspx 页面。大约有 15 列,刚刚超过 1000 行。从加载到完成大约需要 6-7 秒,其中只有 3 秒是服务器端处理。我绝对可以优化这一点。但是剩下的 4 秒似乎发生在客户端收到服务器的响应之后。

  • 单击按钮后,网格仅在 6-7 秒后加载。
  • 但 Fiddler 显示总经过时间为 2.2 秒。
  • 我有一个 GIF 在 AjaxLoadingPanel 中显示“正在加载...”,它在最后 4 秒内挂起(没有动画)。

我查看了 Chrome 的时间线,这就是我所看到的: 在此处输入图像描述

  • 我在 2 秒左右发送页面请求(发送请求)。我开始看到 GIF 加载动画。
  • 大约 4.2 秒时,GIF 动画停止。在接下来的 3-4 秒内,您会在时间线中看到“ XHR 就绪状态更改”。
  • 大约 8.5 秒时,GIF 动画开始播放,我的页面已完全加载。
  • Fiddler 告诉我页面加载总共需要 2.2 秒。

基于此,我猜测浏览器正在尝试在最后 4 秒内解析和呈现页面。现在我该怎么做?我可以进一步挖掘以了解原因吗?

  • 似乎有很多“布局”事件来自各种 ScriptResource.axd 文件,这些都是由 Telerik 生成的。
  • 布局记录中还会显示一条警告,上面写着“强制同步布局是可能的性能瓶颈”。这是我能控制的吗?将 .axd 文件合并到一个文件中(使用自定义 HTTP 处理程序?)会有任何帮助吗? 在此处输入图像描述

这些是什么意思?Radgrid 发出了太多代码让浏览器无法处理?

  1. 分页已打开,但客户希望每页至少看到 1000 条记录。
  2. 排序、分页、行选择、行右键菜单等都启用/可用。

感谢您的帮助,如果您需要更多信息,请告诉我。

4

1 回答 1

2

我在您的时间线中看到仅 1 秒用于执行 JS 代码。其余时间用于布局。您需要以某种方式修改代码并减少强制布局的位置数量。我认为这份文件对你来说可能很有趣。http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

另一种方法是使用视口模式。例如,您只需要为页面的可见部分创建行,并为不可见部分使用具有必要大小的空 div。通常在数据量很大时使用。例如 Sources 面板就是这样工作的,可以显示一个包含 500k 行代码的文件。

时间轴面板中使用了相同的技术。

于 2012-11-22T19:11:18.647 回答