Battle of the Rows: The Limits of Data Performance

Hi there! 😊

Welcome to our recently conducted series of performance benchmarks. Data grids are becoming more popular and increasingly important as they play a vital role in managing and visualizing large datasets, especially in data-intensive applications. In this article we are going to evaluate one of the most famous data grids: AG Grid, Handsontable, and RevoGrid. Our goal was to provide you with some insight into this rapidly growing field.

Benchmark Methodology

We used the following metrics for our comparisons:

1. Memory Usage: Measures how efficiently each grid uses memory (What could be more important in a heavily loaded app?).
2. Scroll FPS: Evaluates the smoothness of scrolling, using frames per second (FPS). Typically, 60 FPS is considered the standard for smooth scrolling, but actual FPS may vary depending on browser capabilities, device performance, and other environmental factors. Variations between tests can occur due to these differences in hardware and software conditions.
3. Time Before First Cell Loaded: How quickly a grid can render and display the first cell (or viewport) after data is loaded.

Consider experimenting with the provided sample datasets. This hands-on approach will give you a practical understanding of grid performance.

We used four different datasets of increasing size: 1,000 rows, 100,000 rows, 200,000 rows, and 400,000 rows, each containing 100 columns. The data was generated using a web worker to avoid environmental dependencies.

We ran two types of tests:

• Headless Mode: Using the Playwright framework for objective, script-driven tests.
• Visual Mode: Testing manually in an actual browser environment.

Our goal was to create an unbiased, basic example of each grid, generating a large dataset and assessing how they handle this load under the same conditions.

Results Overview Summary

Handsontable

The oldest among the three. It operates based on a two-dimensional array structure and relies on traditional HTML elements like <table>, <tr>, and <td>. This makes it less flexible and contributes to performance issues.

Scrolling performance was subpar compared to the others; we noticed visible flickering when scrolling quickly, especially in dark mode. This may be due to Handsontable refreshing the entire viewport on each scroll event, which is common with traditional table structures.

• 100,000 Rows: 1297 MB of memory
• 200,000 Rows: 2498.63 MB of memory
• Failed Beyond 300,000 Rows: Due to memory overhead and table duplication for column freezing, Handsontable struggled beyond 300,000 rows, often leading to crashes.

AG Grid

The most widely-used grids, backed by heavy marketing efforts. It provides a solid, user-friendly experience and features smooth, native-like scrolling. However, it also showed high memory consumption, similar to Handsontable, with its memory usage growing exponentially as we increased the dataset size.

• 100,000 Rows: 1297 MB of memory
• 200,000 Rows: 2660.75 MB of memory
• Failed Beyond 300,000 Rows: Like Handsontable, AG Grid began to crash the browser tab when attempting to handle 400,000 rows.

RevoGrid

The youngest grid of the three, adopts a more modern approach. It uses virtual nodes backed by StencilJS, making it highly efficient for large datasets. RevoGrid includes advanced features that rival those of AG Grid, such as native smooth scrolling and customizable cells, while also being incredibly lightweight.

• 200,000 Rows: Only 368.12 MB of memory
• Succeeded at 400,000 Rows: Handled 400,000 rows smoothly, using only 720 MB of RAM and retaining a smooth scroll experience.

Detailed Performance Metrics

Below are the performance metrics we collected during testing:

Testing 1,000 Rows

- AG Grid:
  - Used JS Heap Size: 40.15 MB
  - Scroll FPS: 60.23
  - Time to First Cell: 8.31 ms

- Handsontable:
  - Used JS Heap Size: 37.77 MB
  - Scroll FPS: 60.62
  - Time to First Cell: 6.67 ms

- RevoGrid:
  - Used JS Heap Size: 20.69 MB
  - Scroll FPS: 60.22
  - Time to First Cell: 6.07 ms

Testing 100,000 Rows

- **AG Grid**:
  - Used JS Heap Size: 1297.00 MB
  - Scroll FPS: 60.59
  - Time to First Cell: 10.95 ms

- Handsontable:
  - Used JS Heap Size: 1297.00 MB
  - Scroll FPS: 60.85
  - Time to First Cell: 16.71 ms

- RevoGrid:
  - Used JS Heap Size: 214.58 MB
  - Scroll FPS: 61.88
  - Time to First Cell: 6.09 ms

Testing 200,000 Rows

- AG Grid:
  - Used JS Heap Size: 2660.75 MB
  - Scroll FPS: 60.10
  - Time to First Cell: 7.42 ms

- Handsontable:
  - Used JS Heap Size: 2498.63 MB
  - Scroll FPS: 59.63
  - Time to First Cell: 13.10 ms

- RevoGrid:
  - Used JS Heap Size: 368.12 MB
  - Scroll FPS: 61.02
  - Time to First Cell: 6.14 ms

Visual Representations of Performance Metrics

To better illustrate the differences in performance between the three grids, we created bar charts for each key metric:

1. Memory Usage Comparison: This chart shows how much memory each grid uses for different dataset sizes.

1. Time Before First Cell Loaded: This chart highlights the time each grid takes to render and display the first cell.

1. Scroll FPS Comparison: This chart visualizes the smoothness of scrolling, using frames per second as a measure.

Final thoughts

The results of our testing clearly show that RevoGrid outperforms the other grids in terms of memory efficiency, scalability, and overall performance. It effectively handles larger datasets with significantly lower memory usage while maintaining smooth scrolling and rapid load times.

AG Grid provides a solid user experience, and Handsontable has some advantages in terms of familiarity and its traditional table semantics.

If your project needs to manage vast amounts of data without sacrificing performance, RevoGrid is an excellent choice. Its lightweight, highly optimized approach ensures that you can scale without worrying about browser crashes or excessive memory use.

Interested in comparing other grids like Tanstack, MUI, Syncfusion, or ReactTable? Let us know, and we'll create a detailed review for you.

Code repo