我将从描述我的情况开始。
我使用分页。在最困难的情况下,我的网格有100行120列。
我使用的功能包括:排序,分组,行选择,列隐藏,列移动,远程和本地分页,列固定(冻结)。
我对此要求没有影响-业务需要它,我无法更改。问题是性能不能接受,我必须改进它。其实我不知道该怎么实现。
渲染网格的性能相当好,但是渲染网格所需的时间绝对不可接受。
在chrome中,渲染网格大约需要40秒。在Internet Explorer(我必须支持)中,渲染网格大约需要2分钟。这些时间是针对100行和120列以及4个固定列的时间(我发现固定列对性能有很大的影响-在铬合金中,固定的渲染时间不能持续19秒,而固定的4个固定列可以持续40秒)。这些时间仅在计算配置时渲染网格时才需要-换句话说,这是从我使用现成的configuration_object函数执行igGrid(config_object)到渲染网格的时间。
我已经阅读了有关网格虚拟化的知识,但是它对您有所帮助,因为我无法使用具有所需功能的列虚拟化。老实说,由于这些限制,网格和带有虚拟滚动的简单表格之间没有什么区别。附加行虚拟化虽然有所帮助,但还不够,而且由于行数过多,使用网格的性能下降-在滚动时会滞后。
我的问题是:
如何提高性能,是否可以使用Igniete UI?
用列出的100行,120列和应用的功能进行完美的优化网格配置,我什么时候可以实现?
如何减少固定功能对性能的影响?
我还发现,如果我在页面上有100行,则通过行虚拟化可以在DOM中创建约70行。也许有一种方法可以减少渲染速度?
也许实际上有一种方法可以显示20行20列的网格,使他可用并稍后渲染其余部分?
答案 0 :(得分:4)
更大的性能开销是由渲染的120列引起的。默认情况下,igGrid
不会水平虚拟化,即使您打开了虚拟化功能,它也与您必须启用的某些功能不兼容。 Chrome的时代仍然不应该如此,我的建议是在Infragistics支持下解决这个问题。
与此同时,帮助中有this article,它提供了有关如何通过igGrid
使性能达到最佳的指导。
答案 1 :(得分:3)
使用IgniteUI for JavaScript的最新版本– 18.2,使用指定的设置,在测试初始加载性能时,我无法获得相同的结果。这是一个jsFiddle,其中包含已应用的设置供您参考:
$("#grid").igGrid({...});
我观察到的初始渲染时间如下: