Question

我使用angular-ui-grid（http://ui-grid.info/）来显示表格数据。总的来说，它很慢，所以我们决定使用ag-grid（https://www.ag-grid.com/）。对于常规大小的数据集来说，这样做性能更高，更好。

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

我想知道是否有人使用了超级网格（https://fin-hypergrid.github.io/core/2.0.2/） - 它似乎在解决问题。大型cols x大行的问题，在他们的演示中，它在大型数据集上看起来要快得多（几乎是一个数量级）。

hypergrid在大数据尺寸上的效果与ag-grid或react-virtualized相比如何？

Answer 1

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

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

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

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

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，这些表的canvas实现。我应该提到最后一个可能的竞争者，虽然这个竞争者主要不是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是解决问题的关键。

Answer 2

您是否考虑过使用专为大型数据集设计的内容？

Clusterize.js

我相信它的工作方式是它只加载您正在查看的元素数据。因此浏览器不会滞后，因为它具有需要显示视口的元素。

演示页面加载了3个示例，每个示例包含500,000个元素（总共1,500,000个元素）。

更新 - 使用示例代码段

因为我没有加载100,000 x 200个数据元素，所以使用JavaScript构建100 x 200。
然后我复制该数组并将其插入数据数组1000次。
通过这种方式，我可以在不重载JavaScript引擎的情况下达到您的总数据集大小。
由于很难说它确实在做100,000行，所以我调用了getRowsAmount()函数，该函数显示在输出的顶部。
您可能需要使用块和＆amp;根据您的视口设置的群集大小，但这应该会向您显示此库完全可以满足您的需求。

＆＃13;

$(function() {
  var dataBlock = []
  var data = [];
  const rows = 100000
  const cols = 200;
  const blockSize = 100;
  const blocks = rows / blockSize;

  for (let i = 0; i < cols; i++) {
    $("thead tr").append(`<th>C${i}</td>`);
  }

  for (let j = 0; j < blockSize ; j++) {
    var tr = $("<tr />");
    for (var i = 0; i < cols; i++) {
      tr.append(`<td>R${j}-C${i}</td>`);
    }

    dataBlock.push($("<div />").append(tr).html());
  }

  for (let i = 0; i < blocks; i++) {
    $.merge(data, dataBlock);
  }

  var clusterize = new Clusterize({
    rows: data,
    scrollId: 'scrollArea',
    contentId: 'contentArea',
    rows_in_block: 10,
    blocks_in_cluster: 2,
  });
  
  $("#totalRows").text(clusterize.getRowsAmount());
});

＆＃13;

table td {
  white-space: nowrap;
  padding: 0 5px;
}

＆＃13;

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://clusterize.js.org/css/clusterize.css" rel="stylesheet" />

  <script src="https://clusterize.js.org/js/clusterize.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  Total Rows: <span id="totalRows"></span>
  <div class="clusterize">
    <div id="scrollArea" class="clusterize-scroll">
      <table class="table">
        <thead>
          <tr></tr>
        </thead>
        <tbody id="contentArea" class="clusterize-content">
          <tr class="clusterize-no-data">
            <td>Loading data…</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>

</html>

＆＃13;

该库支持附加数据，因此您可能希望通过AJAX加载一些数据。

Answer 3

我使用免提版本的handontable用于大数据集。请参阅10000 * 100单元格的示例 - http://jsfiddle.net/handsoncode/Lp4qn55v/

例如，对于角度1.5：

<hot-table class="hot handsontable htRowHeaders htColumnHeaders" settings="settings"
                       row-headers="rowHeaders"  datarows="dba">
    <hot-column ng-repeat="column in Value" data="{{column.COL1}}" >
    </hot-column>
</hot-table>

请参阅文档here

Answer 4

我经历了不同的数据网格选项。然后我发现了this。

希望这个答案对正在数据网格之间进行性能比较的任何人都有用。

即使您已经阅读了我提供的文章，这里也没什么要注意的。

1-网格一旦“足够快”，则表示渲染滞后不会   引人注意，那么哪个网格比下一个网格快都没关系。

2-基于画布的网格不是HTML网格-您无法自定义它   HTML。网格将难以样式化/主题化/定制   由标准JavaScript / CSS开发人员提供。

选择毒药，因为它不仅涉及到消费者方面的表现。

JS网格性能比较

4 个答案: