Question

场景：我使用的是Kendo网格（HTML5）。为了填充网格客户端，首先调用服务器来获取数据，一旦接收到数据，它就会在客户端和服务器上进行一些处理。然后填补网格。

我遇到严重的网格性能问题。网格只有大约3000条记录。但是，只要它将数据填充到网格中，浏览器内存就会超过400 MB。我想找出为什么内存消耗增加这么多？网格只有5列。我有以下问题。

我怎样才能知道消耗内存的位置？我尝试在内置的分析工具中使用谷歌浏览器，但我找不到任何简单的方法，可以清楚地告诉我谁在消耗内存。有没有更好的工具来找到这个？我正在寻找像Red Gate profile .Net profiler这样的工具。
我想知道为什么渲染数据需要这么多时间。有没有什么工具可以告诉我哪个功能/线是耗时的？

Atul Sureka

Answer 1

加载3000条记录是个问题。根据我的经验，您不应该一次加载超过1000条记录，但里程会有所不同，因为有许多因素会影响网络性能和渲染速度。

要解决您的问题，您应该在客户端和服务器上配置分页。这是一个常见问题和常见解决方案。在您的Kendo UI数据源对象上，只需设置serverPaging: true和每页的项目数pageSize: 1000。

var ds = new kendo.data.DataSource({
  // other implementation details left out for brevity
  serverPaging: true,
  pageSize: 1000
});

执行此操作后，数据源将根据请求向服务器发送其他参数。您必须准备好处理这些参数。它将发送top，它指的是在响应中发回的记录数，以及skip，它指示从数据集的开头跳过的记录数。例如，如果您希望3000页记录数据集的第3页每页1000条记录，则网格将发送skip: 2000，top: 1000。

我不知道您的实施服务器端是什么，但这样做相当简单。请注意，必须使用两个密钥data和total从包含在对象中的服务器返回数据。这是Kendo UI中的惯例。数据显然是记录数组，total是数组中的记录数。如果需要，您可以在数据源schema中更改这些默认值。

此外，在客户端上，您需要告诉网格期望分页。您可以通过修改基础参数来自定义分页的外观。

var grid = $('#grid').kendoGrid({
  // other implementation details left out for brevity
  datasource: ds,
  pageable: {
    numeric: false,
    refresh: true
  }
});

Kendo Grid的性能问题（HTML5）

1 个答案: