草庐IT

javascript - JS网格性能对比

coder 2024-05-18 原文

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

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

我想知道是否有人使用过超网格( https://fin-hypergrid.github.io/core/2.0.2/ )——它似乎“解决”了大列 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问题的关键是学习它。

    关于javascript - JS网格性能对比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45910217/

    javascript网格codefin-hypergridhypergridperformanceag-gridreact-virtualized

    有关javascript - JS网格性能对比的更多相关文章

    1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

      我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

    2. Ruby 的数字方法性能 - 2

      我正在使用Ruby解决一些ProjectEuler问题，特别是这里我要讨论的问题25(Fibonacci数列中包含1000位数字的第一项的索引是多少？)。起初，我使用的是Ruby2.2.3，我将问题编码为:number=3a=1b=2whileb.to_s.length但后来我发现2.4.2版本有一个名为digits的方法，这正是我需要的。我转换为代码:whileb.digits.length当我比较这两种方法时，digits慢得多。时间./025/problem025.rb0.13s用户0.02s系统80%cpu0.190总计./025/problem025.rb2.19s用户0.0

    3. ruby - Ruby 性能中的计时器 - 2

      我正在寻找一个用ruby​​演示计时器的在线示例，并发现了下面的代码。它按预期工作，但这个简单的程序使用30Mo内存(如Windows任务管理器中所示)和太多CPU有意义吗？非常感谢deftime_blockstart_time=Time.nowThread.new{yield}Time.now-start_timeenddefrepeat_every(seconds)whiletruedotime_spent=time_block{yield}#Tohandle-vesleepinteravalsleep(seconds-time_spent)iftime_spent

    4. ruby-on-rails - 如果条件与 &&，是否有任何性能提升 - 2

      如果用户是所有者，我有一个条件来检查说删除和文章。delete_articleifuser.owner?另一种方式是user.owner?&&delete_article选择它有什么好处还是它只是一种写作风格 最佳答案 性能不太可能成为该声明的问题。第一个要好得多-它更容易阅读。您future的自己和其他将开始编写代码的人会为此感谢您。 关于ruby-on-rails-如果条件与&&，是否有任何性能提升，我们在StackOverflow上找到一个类似的问题：

    5. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

      我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

    6. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

      rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

    7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

      我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

    8. ruby - 如何找到我的 Ruby 应用程序中的性能瓶颈？ - 2

      我编写了一个Ruby应用程序，它可以解析来自不同格式html、xml和csv文件的源中的大量数据。我如何找出代码的哪些区域花费的时间最长？有没有关于如何提高Ruby应用程序性能的好资源？或者您是否有任何始终遵循的性能编码标准？例如，你总是用加入你的字符串吗？output=String.newoutput或者你会使用output="#{part_one}#{part_two}\n" 最佳答案 好吧，有一些众所周知的做法，例如字符串连接比“#{value}”慢得多，但是为了找出您的脚本在哪里消耗了大部分时间或比所需时间更多，您需要进行分

    9. ruby-on-rails - 你能为 Ruby on Rails 推荐好的数据网格类/gem 吗？ - 2

      您能为RubyonRails推荐好的数据网格类/gem吗？喜欢http://code.google.com/p/zend-framework-datagrid/采埃孚 最佳答案 你也可以试试datagridgem。这不仅关注带有列的网格，还关注过滤器。classSimpleReportincludeDatagridscopedoUser.includes(:group)endfilter(:category,:enum,:select=>["first","second"])filter(:disabled,:eboolean)fi

    10. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

      我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每

    随机推荐