javascript – JS网格性能比较

前端之家收集整理的这篇文章主要介绍了javascript – JS网格性能比较前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用angular-ui-grid( http://ui-grid.info/)来显示表格数据.总的来说,它很慢,所以我们决定使用ag-grid( https://www.ag-grid.com/).对于常规大小的数据集来说,这样做性能更高,更好.

但是,现在我们正在使用一些大小为100 cols×10,000行(~1M单元格)的表格数据,并且网格的性能似乎相当慢.

我想知道是否有人使用了hypergrid(https://fin-hypergrid.github.io/core/2.0.2/) – 它似乎’解决’大cols x大行的问题,并且在他们的演示中,它似乎在大型数据集上更快(几乎是一个数量级).

hypergrid与大型数据尺寸的性能相比如何与ag-gridreact-virtualized相比较?

解决方法

我没有尝试过你提到的那些示例库,但也许我可以解释为什么fin-hypergrid最突出.我的观点主要基于我的JavaScript知识以及这种东西如何在后面工作.

我应该从react-virtualized和ag-grid开始:

>两者都使用填充DOM的方式,只显示视图的一部分数据,动态地从DOM中删除不再可见的内容,并提前添加即将发布的内容.现在问题在于添加删除DOM中的内容,因为这样可以非常快/多次执行.因此,我们会遇到一些滞后或抖动.您实际上可以检查Web控制台>个人资料>记录JavaScript cpu配置文件,并看到此方法需要一些时间才能完成.因此,唯一与反应虚拟化和ag-grid不同的是他们以最平滑的方式应用这些变化的算法.

从我所看到的ag-grid是受这个问题影响最大的那个,因为你实际上可以看到一些尚未完成渲染的元素,当你滚动得太快时会遇到严重的延迟.

另一方面,反应虚拟化可以以最平滑的方式实现其算法.这可能是DOM操作类别中可用的最佳库,尽管它仍然存在操作DOM太快而产生延迟的问题,尽管只有在涉及大块数据时才会出现这种情况.

以下是fin-hypergrid擅长的原因:

> fin-hypergrid的最佳资产是它根本不执行DOM操作,所以你已经避免因添加删除过快而导致的问题,因为它使用< canvas>
> fin-hypergrid还仅显示用户看到的数据,并动态删除不可见的内容.它还提前添加以实现平滑的滚动感,因此不会显示静态渲染项.
> fin-hypergrid在滚动算法方面做得非常出色,可以达到最平滑的方式,因此没有抖动或延迟.

现在这并不意味着hypergrid一切都很好,它也有一些缺点:

>由于fin-hypergrid是使用HTML5 Canvas制作的,因此它不会接受CSS,因此它将成为一种真正的痛苦.您需要手动设置样式.
>要记住的一些事项是表单控件,例如< select>,单选按钮,复选框等,实现起来真的很痛苦.如果您正在尝试实现类似的功能,请谨慎行事.
>它主要用于显示简单列编辑的数据,不涉及文本框以外的任何内容,并实现最流畅的滚动感.

现在总结一下,我可能会建议使用react-virtualized来代替,因为它提供了最流畅的卷轴,在fin-hypergrid之上.如果你愿意忽视fin-hypergrid的缺点,那么fin-hypergrid是最好的选择.

更新:

自从我们讨论了JS / CSS,这些表的canvas实现.我应该提到最后一个可能的竞争者虽然这个主要不是js表库,但是Google表格可能已被使用的框架称为d3.js.

> d3.js具有画布的速度和功能,同时保留HTML结构,这意味着可以使用CSS设置样式!
>它最大化了HTML 5 SVG的使用
>我不能在d3.js中说得更好

d3.js在本次讨论中唯一的缺点是:

>没有可用的好表库,它们使用d3.js. Google表格即是.但他们不共享代码.
> d3.js只是很难学,虽然有很多东西可以帮助我们更快地学习,但不是那么快.

如果你想要使用CSS造型功能的Canvas速度,那么d3.js是解决问题的关键.

猜你在找的JavaScript相关文章