javascript - JS网格性能比较

我正在使用angular-ui-grid(http://ui-grid.info/)显示表格数据。总体而言，这很慢，因此我们决定使用ag-grid(https://www.ag-grid.com/)。对于常规大小的数据集，它的性能要好得多，并且要处理得更好。

但是，现在我们正在处理一些大小为100 cols x 10,000行(〜1M单元)的表格数据，并且网格的性能似乎很慢。

我想知道是否有人使用了hypergrid(https://fin-hypergrid.github.io/core/2.0.2/)-似乎可以“解决”大型col x大行的问题，而在他们的演示中，大型数据集似乎要快得多(几乎一个数量级)。

在大数据量上，hypergrid与ag-grid或react-virtualized的性能相比如何？

最佳答案

我没有尝试过您提到的任何示例库，但是也许我可以解释为什么fin-hypergrid最突出。我的意见主要基于我的JavaScript知识以及这种东西在后面的工作方式。

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

都使用填充DOM的方式，并且仅向 View 显示一部分数据，从DOM中动态删除不再可见的内容，并预先添加即将出现的内容。现在，这里的问题在于在DOM中添加和删除内容，因为这往往非常快/每秒执行多次。因此，我们会遇到一些滞后或抖动。实际上，您可以检查 Web控制台>配置文件>记录JavaScript CPU配置文件，并查看此方法需要花费一些时间才能完成。因此，唯一与react-virtualized和ag-grid不同的是它们以最流畅的方式应用这些更改的算法。

据我所知，ag-grid是受此问题影响最大的一种，因为您实际上可以看到一些尚未完成渲染的元素，并且当您滚动太快时会遇到严重的延迟。

另一方面，react-virtualized以最流畅的方式执行了出色的算法。这可能是DOM操作类别中可用的最佳库，尽管它仍然遭受过快地操作DOM的问题，这会产生滞后，尽管只有在涉及大量数据时才能看到这一点。

这是fin-hypergrid出色的原因:

fin-hypergrid的最佳 Assets 是它根本不执行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 Sheets的框架称为d3.js。

d3.js具有 Canvas 的速度和功能，同时保留了HTML结构，这意味着可以使用CSS对其进行样式设置!

最大限度地利用HTML 5 SVG

我不能再说d3.js更好的了

在此讨论中，d3.js的唯一缺点是:

没有可用的好的表库使用d3.js。就是Google Sheets。但是他们不共享代码。

d3.js很难学习，尽管有很多东西可以帮助我们更快但不是那么快地学习。

如果您希望CSS样式功能具有Canvas的速度，那么d3.js是学习该问题的关键。