JS网格性能比较

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

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

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

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

react-virtualized另一方面，以最流畅的方式执行其算法的出色工作。这可能是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，因此这些表的画布实现。虽然这个人是不是主要是JS表库，但在一个框架，我应该提到的最后一个可能的竞争者Google Sheets可能已经使用它被称为d3.js。

• d3.js 具有画布的速度和功能，同时保留HTML结构，这意味着可以使用CSS对其进行样式设置！
• 它最大限度地利用了HTML 5 SVG
• 我不能再说什么更好的了 d3.js

该d3.js讨论的唯一缺点是：

• 没有可用的优质表库d3.js。Google Sheets那是。但是他们不共享代码。
• d3.js 虽然有很多东西可以帮助我们更快但不是那么快地学习，但是很难学习。

如果您想通过CSS样式功能提高Canvas的速度，那么d3.js关键是要学习它。