JS网格性能比较

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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大行的问题,并且在他们的演示中它似乎在大数据集上更快(几乎一个数量级)。

hypergridag-gridreact-virtualized在大数据大小上的表现相比如何?

答案

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

我应该从react-virtualizedag-grid开始:

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

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

另一方面,react-virtualized以最流畅的方式完成了算法。这可能是DOM操作类别中可用的最佳库,尽管它仍然存在操作DOM太快而产生滞后的问题,尽管只有在涉及大块数据时才会出现这种情况。

以下是qazxsw poi擅长的原因:

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

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

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

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

更新:

自从我们讨论了JS / CSS,这些表的canvas实现。我应该提到最后一个可能的竞争者,虽然这个主要不是js表库,但是fin-hypergrid可能被使用的框架叫做Google Sheets

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

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

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

如果你想要使用CSS样式功能的Canvas速度,那么qazxsw poi是问题的关键。

另一答案

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

d3.js

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

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

更新 - 使用示例代码段

  • 因为我没有加载100,000 x 200个数据元素,所以使用JavaScript构建100 x 200。
  • 然后我复制该数组并将其插入数据数组1000次。
  • 这样我就可以在不重载JavaScript引擎的情况下达到您的总数据集大小。
  • 由于很难说它确实在做100,000行,所以我调用了d3.js函数,该函数显示在输出的顶部。
  • 您可能需要根据视口使用块和簇大小,但这应该向您显示此库完全可以支持您的需求。

Clusterize.js
getRowsAmount()
$(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());
});
另一答案

我使用免费版本的handontable用于大数据集。查看10000 * 100个单元格的示例 - table td { white-space: nowrap; padding: 0 5px; }

例如,对于角度1.5:

<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>

请参阅文档http://jsfiddle.net/handsoncode/Lp4qn55v/

另一答案

我已经完成了不同的数据网格选项。然后我找到了<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>

希望这个答案有助于任何正在寻找数据网格之间性能比较的人。

这里有几点需要注意,即使你已经完成了我提供的文章。

1 - 一旦网格“足够快”,这意味着渲染延迟不明显,那么哪个网格比下一个网格更快并不重要。

2 - 基于画布的网格不是HTML网格 - 您无法使用HTML自定义它。网格将很难被标准的JavaScript / CSS开发人员设置样式/主题/自定义。

选择你的毒药,因为它不仅仅是消费者层面的表现。

以上是关于JS网格性能比较的主要内容,如果未能解决你的问题,请参考以下文章

片段中的网格视图

Three.js 中的自定义纹理着色器

Forge Viewer - 如何在场景中访问(或获取渲染/片段代理)克隆的网格?

性能比较好的单例写法

在片段着色器中丢失纹理定义

将 glDrawElements 性能与预期 GPU 性能进行比较?