提高 RadGrid 客户端性能

Question

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

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

我查看了 Chrome 的时间线，这是我看到的：

• 我在 2 秒左右发送页面请求（发送请求）。我开始看到 GIF 加载动画。
• 在大约 4.2 秒时，GIF 动画停止。在接下来的 3-4 秒内，您会在时间线中看到“XHR Ready State Change”。
• 大约 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

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

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