Reactコンポーネントのパフォーマンス比較：Gravity UI vs 他のライブラリ
Reactコンポーネントのパフォーマンス比較：Gravity UI vs 他のライブラリ
私はGravity UIのコア開発者です。私たちのチームには、@gravity‑ui/uikitライブラリのReactコンポーネントのパフォーマンスについて定期的に質問が寄せられます。この問題について小規模な調査を行うことにしました。以下に書かれていることは、今後の調査の出発点であり、なぜGravityが遅いのかという質問への回答の試みです。
通常、このリクエストは追加の詳細なしに送られてくるため、主なパフォーマンス問題の一つ（もちろん唯一ではありませんが）は描画時間の長さであると仮定しています。この調査では、各ライブラリの個々のコンポーネントの初回レンダリングにかかるコストを、隔離された環境で検証しました。比較対象として、@adobe/react-spectrum、@mui/material、antdライブラリを選びました。
調査方法
技術スタック：
テスト実行条件：
- 各テストは別々のブラウザコンテキストで実行されます。
- 一度に実行されるテストは1つだけ（Playwright設定の
workers）、これにより各テストに同じリソースが割り当てられることが保証されます。 - 各テストは50回繰り返されます。
- テストは異なるノード数（10、100、1000）で実施されます。
1回のテストの実行順序：
- ブラウザで新しいページを開く。
PerformanceObserverの初期化。- メトリクス収集の開始。
- コンポーネントのレンダリング。
- メトリクス収集の終了。
測定プロセス：
各テストの開始時に'measure'タイプのイベントを追跡するPerformanceObserverが作成されます。収集されたすべてのメトリクスはグローバルオブジェクト__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を作成して議論しましょう。また、プロジェクトにスターを付けることも忘れないでください！
