performance - 提高 RadGrid 客户端性能

Question

我有一个 aspx 页面，它呈现以编程方式创建的 RadGrid。大约有 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. 排序、分页、行选择、行右键菜单等均已启用/可用。

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

Answer 1

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

另一种方法是使用视口(viewport)模式。例如，您只需要为页面的可见部分创建行，并为不可见部分使用具有必要大小的空 div。 当数据量相当大时使用是常见的做法。例如，“源”面板就是以这种方式工作的，可以显示包含 50 万行代码的文件。

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