React 数据网格性能基准测试：谁才是最快的渲染之王？

IT加油站2026-09-07 18:37811分钟

原文：https://dev.to/sylwia-lask/whats-the-fastest-react-data-grid-lets-find-out-benchmarks-58c4（作者 @sylwia-lask）

Web开发已经发生了很大变化。我们有大语言模型、AI辅助编码等等。但有些事情保持不变：架构和性能。在许多应用程序中，一个经典问题是呈现大量数据，最终导致需要选择正确的数据网格。

我一直感到惊讶的是这种情况发生得如此之快。你开始开发一个看似简单的应用程序，几个月后你意识到，抱歉，普通的HTML表格已经不够用了。你需要更严肃的工具。

当然，没有合理的开发者会从头构建企业级数据网格。你的工作是专注于你的业务领域，使用已经为这类问题构建、优化和实战测试过的工具。

幸运的是，我们有很多网格可供选择。

那么，假设你正在构建一个React应用程序，需要选择一个数据网格。今天可用的流行选项中，哪个实际上是最快的？

六个竞争者

本文是与1771 Technologies合作创建的，他们是LyteNyte Grid的创建者。我们将把LyteNyte与npm上五个下载量最高且符合基准测试要求的React数据网格进行对比。

所以我们的六个竞争者是：

LyteNyte Grid* — 一个由1771 Technologies开发的性能导向的React数据网格。

AG Grid* — 可能是最知名的企业数据网格之一，支持多种框架。

MUI X Data Grid* — 来自Material UI生态系统的数据网格，有免费和商业版本。

DevExtreme* — DevExpress的组件套件，包含功能丰富的React数据网格。

Handsontable* — 一个类似电子表格的数据网格，专注于编辑和类Excel交互。

Material React Table* — 一个基于TanStack Table和Material UI的流行React数据网格。

1771 Technologies旨在证明他们的网格是最快的。为此，他们创建了一整套基准测试，比较不同操作和数据集大小下的渲染性能。有时使用坦率地说是荒谬的数据量。

是的：这些基准测试是由其网格赢得它们的公司创建的。 然而，有一个相当重要的细节。整个基准测试套件是开源的。你可以检查方法论，下载代码，修改测试，并自己运行一切。事实上，作者明确鼓励你复现基准测试并得出你自己的结论。

这正是我所做的。但我们稍后会讲到。

查看GitHub上的原始基准测试仓库

官方结果：谁赢了？

原始基准测试包含 13 个场景，涵盖垂直滚动、排序、筛选、固定行列、水平滚动以及全量数据更新。测试从 1 万行数据开始，在最极端的情况下，数据规模高达 100 万行。

滚动

这是 LyteNyte Grid 取得一些最亮眼成绩的环节。

在官方基准测试环境中，LyteNyte 在所有测试的数据规模下均保持约 60 帧/秒（FPS）的流畅度，包括 100 万行数据。

MUI 和 AG Grid 在较小规模时表现相近，但随着数据集增大，其性能有所下降。在 100 万行数据时，MUI 帧率降至约 33 FPS，而 AG Grid 则降至约 27 FPS。DevExtreme 的表现相对稳定但速度慢很多，Material React Table 的滚动帧率最低。Handsontable 由于内存限制，无法在基准测试机器上完成最大规模的测试。

📌 滚动性能（图，点击查看）

排序与筛选

排序对所有表格库的要求更高。

没有一个表格库能在所有排序场景中都维持 60 FPS，但 LyteNyte 依然在每一个测试的数据规模上都提供了最高的性能。AG Grid 在 5 万到 10 万行数据之间的扩展性尤其出色，而 Handsontable 的性能则随数据集增大显著下降。

📌 排序性能（图，点击查看）

筛选表现出类似的模式。在 10 万行数据时，LyteNyte 达到了约 45 FPS，AG Grid 以约 36 FPS 位居第二。MUI 保持了竞争力但落后于前两者，随着数据集的增加，其余表格库之间的性能差异变得更加明显。

📌 筛选性能（图，点击查看）

固定行列、水平滚动与更新

一些更有趣的结果来自类似企业级实际应用场景的测试：固定行列、水平滚动以及替换整个数据集。

在固定行列的场景下，LyteNyte 达到了约 58 FPS。

水平滚动实际上是一场更为接近的比赛：LyteNyte 达到 60 FPS，AG Grid 57 FPS，MUI 55 FPS。三者都很好地处理了水平方向的虚拟化。

全量数据更新再次拉开了它们的差距。LyteNyte 达到约 51 FPS，其后是 AG Grid 的 39 FPS 和 MUI 的 22 FPS。

📌 固定行列、水平滚动和更新性能（图，点击查看）

你可以在此查看完整结果：完整的 React 数据表格性能基准测试结果。

如果你对详细的表格性能数据感兴趣，或者单纯喜欢看成堆的图表，我推荐你看看。

好吧，但我们能信任厂商的基准测试吗？

我谁也不信。

所以我做的第一件事就是 Fork 这个仓库并自己运行基准测试，方法略有修改。我的测试方法非常……不科学。我没有将我的电脑打造成一个无菌的基准测试环境，也没有在某个专用流水线上、使用完美控制的 CPU 资源来运行测试。

为什么？因为我想看看 LyteNyte 的优势在远没那么理想的条件下是否依然存在。一个真实用户不会有专门为你的表格库准备的、完美无暇的 CPU。他可能开着 80 个浏览器标签页，后台运行着 Spotify，某个地方还开着 Excel 表格，很可能还有另外三个应用在神秘地占用内存。

所以，我就在自己的日常电脑上运行基准测试，同时在后台继续做其他事情。

目标不是要复现 1771 Technologies 的确切 FPS 数字。那本身也没多大意义：基准测试结果自然会因机器、浏览器和系统负载而异。我想看的是，在嘈杂的日常环境中，性能优势是否依然存在。

三辆F1赛车，一辆帕萨特，一辆菲亚特熊猫...

在本地运行了基准测试后，我很快决定不再测试全部六个表格库。相反，我专注于三个综合表现最强的库。

别误会：我完全理解 1771 Technologies 为何选择他们测试的这些库。除 LyteNyte 外，他们选择了 npm 上下载量最高的五个符合条件的 React 表格库。人们下载的就是这些，这几乎不是他们的错。

但看着一些官方结果，我总忍不住感觉，自己看的像是 三辆 F1 赛车、一辆旧大众帕萨特、一辆菲亚特熊猫，以及一个决定用腿跑步的人之间的比赛。

所以我最终测试的是：

LyteNyte Grid*

AG Grid*

MUI X Data Grid*

我还把基准测试的记录迭代次数从 50 次减到了 10 次，并跳过了最极端的场景，比如滚动查看 100 万行数据。如果你想了解我具体改了什么——或者自己运行我的版本——这是我的 Fork：

我在 GitHub 上的基准测试实验

我的结果

这就是有趣的地方。我的绝对数值与官方基准测试结果大相径庭。这完全在预料之中。

举个最简单的例子：Scroll 10K。

在官方环境中，LyteNyte 接近 60 FPS。在我的机器上呢？我十次运行的中位数只有大约 37 FPS。AG Grid 达到了大约 23 FPS，MUI 大约 21 FPS。

绝对数字上的差异很大。但相对结果如何？

LyteNyte → AG Grid → MUI。

📌 My scroll 10k result（图，点击查看）

当将数据集增加到 200K 行时，也出现了相同的模式。LyteNyte 的中位数约为 33 FPS，相比之下 AG Grid 大约 20 FPS，MUI 大约 17 FPS。

固定行也产生了相似的结果：LyteNyte 约 31 FPS，AG Grid 约 20 FPS，MUI 约 17 FPS。

横向滚动对所有组件都更快，但 LyteNyte 仍然领先，中位数约为 48 FPS，其次是 AG Grid 的 39 FPS 和 MUI 的 27 FPS。

以下是我每个基准测试运行十次后的中位数 FPS 对比：

Scroll 10K：LyteNyte Grid 37.2 FPS，AG Grid 23.1 FPS，MUI X Data Grid 20.9 FPS
Scroll 200K：LyteNyte Grid 33.0 FPS，AG Grid 19.9 FPS，MUI X Data Grid 17.1 FPS
Pinned 200K：LyteNyte Grid 31.0 FPS，AG Grid 20.1 FPS，MUI X Data Grid 17.0 FPS
Horizontal 50K：LyteNyte Grid 48.0 FPS，AG Grid 39.1 FPS，MUI X Data Grid 27.0 FPS
Sorting 10K：LyteNyte Grid 30.5 FPS，AG Grid 20.1 FPS，MUI X Data Grid 29.5 FPS

并非每个结果都完全复制了其他两个网格之间的精确排名——这一点很重要。

例如，在我的 Sorting 10K 测试中，LyteNyte 和 MUI 几乎持平，大约为 30.5 和 29.5 FPS，而 AG Grid 约为 20 FPS。

因此，我并不是声称每个基准测试都产生了完全相同的顺序。

真正显著保留的是更广泛的模式：在我重新运行的测试中，LyteNyte 始终是性能最强的，即使我使用了不同的机器、更少的迭代次数以及有意为之的、更少控制的条件。

这比完全复制相同的 FPS 数值更让我感兴趣。

📌 Chart my full benchmark results（图，点击查看）