To answer this question, we got into the trenches and ran performance tests comparing Ext JS data grid to other popular market offerings and outlined our results in this post.
There have been several JS Grid performance claims (each valid in their own way), but many lack the demonstration of real use case scenarios — specifically pertaining to large datasets. This performance evaluation was based on how an end-user would actually use the grid in the field and we put the most popular data grids to test.
Our test results indicate that while most grids do well with initial static load time and dynamic filtering speeds, Ext JS data grid outperformed most competitors on scrolling performance when tested with medium to large datasets (100,000 to 1,000,000+ data volumes). Ext JS was over 300x faster than leading data grid vendors.
Scrolling performance is a key indicator of grid stability given the frequent need to scroll through huge amounts of filtered data. Ext JS data grid’s blazing fast Virtual Scrolling experience retrieves and displays large data requests under a second (compared to minutes for certain competitors).
Let’s dive deeper into the experiment details and how the measurements were conducted.
The data grid performance was measured on 3 main metrics.
- Initial Load Time — How long does it take to load the initial set of static data.
- Filtering speed — Time to dynamically filter on a field (eg: characters in a name).
- Scrolling speed — How long does it take to scroll through various portions of the grid (eg: first few entries, scroll through a certain section of the grid and back up, mid grid and up a few entries, scroll to end of grid etc.)
Experiments were conducted on server-side data containing small (10,000), medium (100,000) and large (1 million+) datasets (number of rows). For each competitor, their respective Grid Infinite/Virtual Scrolling capabilities were used to gather the metrics.
Grid Scrolling Methods
Before we jump into the results, it’s important to quickly distinguish between the different types of server-side scrolling. Vendors use scrolling terms interchangeably, so we’d like to take a minute to go over what each feature really means and which one was used for this analysis.
Paging: Users can scroll through a page at a time or through a range of specified pages to retrieve information. Grid retrieves the requested pages of data and displays them.
Infinite Scrolling: Users can navigate through pages without specifying which ones. Data pages are loaded when the scroll bar reaches the end of display. The scroll bar size does not visually reflect the complete amount of data available. It’s infinite, and as the user scrolls, more data is loaded and the scroll bar grows.
Virtual Scrolling: Users can seamlessly navigate through the entire grid. The scroll bar size visually reflects the total amount of data. Users can smoothly scroll to the end of the grid as the grid knows about the total amount of data but intelligently loads the right amount based on the data being requested.
When massive data needs to be displayed and analyzed, implementing paging or a no scroll bar type of grid is just not practical. In most big dataset use case scenarios, users aren’t sure where their desired data resides — so they are typically searching/sorting/filtering data first, then scrolling through to sections of the filtered data as they narrow down on the relevant data section.
Highly performant grids implement true virtual scrolling capabilities, so scrolling through any section of the grid is smooth and fast.
The benchmarking experiment (conducted April 20, 2020) used scrolling capabilities available at that time. Where available, the vendor’s equivalent Virtual scrolling feature was used. When vendors lacked Virtual scrolling, Infinite scrolling was implemented. The table below provides clarity on the exact scrolling feature implemented for each vendor.
Experiments were run on the following popular data grids:
- Ext JS Classic Grid
- Telerik – Kendo UI Grid
- DevExpress – DevExtreme Grid
- Grapecity – Wijmo FlexGrid