React 组件性能比较：Gravity UI vs 其他库

我是 Gravity UI 的核心开发者，我们团队会不时收到关于我们组件库 @gravity-ui/uikit 中 React 组件性能的问题。我决定就此做一个小型研究，下面写的所有内容都是进一步研究的起点，并尝试回答一个问题：为什么 Gravity 会变慢。

通常这类请求不会提供额外细节，因此我假设性能问题的主要原因之一 （当然并非唯一原因）是渲染耗时过长。在本次研究中，我们在隔离的 环境里考察了各个组件库中单个组件首次渲染的开销。对比选择了 @adobe/react-spectrum、@mui/material 和 antd。

研究方法

技术栈：

• Playwright — 用于在不同浏览器中自动化测试代码的框架。
  了解更多
• PerformanceObserver API — 用于测量性能的浏览器 API。
  了解更多

测试执行条件：

• 每个测试都在独立的浏览器上下文中运行。
• 同一时间只运行一个测试（Playwright 配置中的 workers 设置），从而 保证每个测试获得相同数量的资源。
• 每个测试重复 50 次。
• 测试在不同节点数量（10、100、1000）下进行。

单个测试的执行顺序：

• 在浏览器中打开新页面。
• 初始化 PerformanceObserver。
• 开始收集指标。
• 渲染组件。
• 结束收集指标。

测量过程：

每个测试开始时都会创建一个 PerformanceObserver，用于监听类型为 'measure' 的事件。所有收集到的指标都会保存在全局对象 __PERFORMANCE_METRICS__ 中。Observer 会自动收集操作的执行时间数据，包括指标名称、事件类型、开始时间和持续时间。我们通过 measure 事件记录我们的 total-render-time 测量值。

结果

测量结果不包含绝对数值。不同环境下结果当然会有所波动。 但这些数据足以让我们看到一些规律，并据此得出结论：

• @gravity-ui/uikit 表现出有竞争力的结果：

  • 在大多数测试中位于排行榜前列。
  • 在不同节点数量下渲染时间保持稳定。
  • 在 Button、Checkbox 和 Switch 组件上尤其高效。
  • TextArea 组件的渲染时间存在问题。

• @mui/material 也显示出不错的结果：

  • 在节点数量较少时，几乎在所有类别（例如 Text、Label）中领先。
  • 渲染时间会随着节点数量增加而明显增长。

• antd 和 React Spectrum：

  • 在大多数测试中渲染时间更长。
  • 最小与最大耗时之间的波动更大。

使用这个 工具 可以在本地机器上进行性能测量，也可以为尚未覆盖的组件添加测试。 如果你能在本地部署它，并将你电脑上的运行结果通过 PR 提交给我们， 将对我们非常有帮助。

在本文中，我展示了我们如何处理该库的一个示例。但社区反馈对我们 非常重要：如果你有某个具体案例，显示 Gravity UI 明显比其他库差， 或者你发现我们的测试方法存在问题，欢迎在本文评论区留言，或 创建 issue 一起讨论。另外也别忘了给项目点个星！