如何从 Infragistics Ignite-UI 提高 igGrid 的性能？答案

【问题标题】：How improve performance in igGrid from Infragistics Ignite-UI?如何从 Infragistics Ignite-UI 提高 igGrid 的性能？
【发布时间】：2019-02-17 03:38:25
【问题描述】：

我将从描述我的情况开始。

我使用分页。在最困难的情况下，我的网格有 100 行和 120 列。
我使用以下功能：排序、分组、行选择、列隐藏、列移动、远程和本地分页、列固定（冻结）。

我对这个要求没有影响 - 业务需要它，我不能改变它。问题是性能不可接受，我必须改进它。其实我也不知道怎么实现。

渲染网格的性能非常好，但渲染网格所需的时间是绝对不能接受的。

在 chrome 中，渲染网格大约需要 40 秒。在 Internet Explorer（我必须支持）中，渲染网格持续大约 2 分钟。这些时间是针对 100 行和 120 列的 4 个固定列（我发现固定列对性能有巨大影响 - 没有修复最后 19 秒的渲染，4 个固定列在 chrome 中持续 40 秒）。这些时间仅用于在计算配置时渲染网格 - 换句话说，这是从我使用准备好的 configuration_object 函数执行 igGrid(config_object) 到渲染网格的时间。

我已经阅读了有关网格虚拟化的信息，但它有点帮助，因为我无法使用具有所需功能的列虚拟化。老实说，由于这些限制，网格和带有虚拟滚动的简单表格之间存在一些差异。附加行虚拟化有点帮助，但还不够，而且由于行数的原因，使用网格会降低性能 - 滚动时会滞后。

我的问题是：

如何提高此性能，是否可以使用 Igniete UI？
完美优化的网格配置（包含 100 行、120 列和我列出的应用功能）可以达到什么时候？
如何减少修复功能对性能的影响？
我还发现，如果页面上有 100 行，则使用行虚拟化会在 DOM 中创建大约 70 行。也许有一种方法可以减少以加快渲染速度？
也许有一种方法可以实际显示网格，例如 20 行和 20 列，使网格可用并稍后渲染其余部分？

【问题讨论】：

标签： infragistics ignite-ui iggrid

【解决方案1】：

更大的性能开销是由呈现的 120 列引起的。默认情况下igGrid 没有水平虚拟化，即使您打开虚拟化，它也与您必须在您的需求中启用的某些功能不兼容。您为 Chrome 获得的时间仍然不是应该的，我的建议是在 Infragistics 支持处解决这个问题。

同时在帮助中有this article，它提供了有关如何使用igGrid 使性能达到最佳的指导。

【讨论】：

【解决方案2】：

使用最新版本的 IgniteUI for JavaScript – 版本 18.2，使用指定的设置，我在测试初始加载性能时无法获得相同的结果。这是一个带有应用设置的 jsFiddle 供您参考：

$("#grid").igGrid({...});

http://jsfiddle.net/ojpydtwm/

我观察到的初始渲染时间如下：

在具有初始固定列的 Chrome 上 - 大约 3.5 秒
在没有初始固定列的 Chrome 上 - 大约 2.5 秒
在具有初始固定列的 IE 上 - 大约 9.5 秒
在没有初始固定列的 IE 上 - 大约 6 秒

【讨论】：