javascript - Kendo Grid (HTML5) 的性能问题

Question

场景:我正在使用 Kendo 网格 (HTML5)。要填充网格，客户端首先调用服务器以获取数据，一旦它接收到数据，它就会在客户端上进行一些处理，然后填充网格。

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

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

阿图尔苏里卡

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，它指示从数据集开始跳过的记录数.例如，如果您希望每页 1000 条记录的 3000 条记录数据集的第 3 页，网格将发送 skip: 2000、top: 1000。

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

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

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