Performance results, testing Sencha's Ext JS Grid against competitor grids in a series of benchmark tests.
The following JavaScript Grid/Table libraries were evaluated:
See Live Charts
- Initial Loading
- Server-side Filtering
- Scrolling
A python script was developed to generate 1000 rows of JSON data on demand. Five data types are created, those being:
- Text
- Date
- Boolean
- Integer
- Float
Where the option existed a vanilla JS approach is taken, additionally where a pre-minified version of the library existed that could be directly included in the HTML page, this was used for simiplicity sake. However some libraries such as Grapecity Flexgrid and MaterialUI uses npm and are served on port 3000.
The JSON data was served from NGINX running locally on port 8082. The tests checked into the source control repository have been updated to reference a local copy of the data so where possible the code can be run without needing to serve the file over an HTTP connection, this can be changed as desired if you wish to serve the data from a different source/websserver.
Unless explicitly noted within the library and/or README file data was loaded prior to the test being run to reduce the impact of any latency from the webserver.
Results from each test are output in the console.log and also on the page.
The test wrapper code is located is the src directory and available as a static class (test_metrics_static.js) or one that can be instantiated (test_metrics.js).
All tests were run on a Macbook pro with 2.6 GHz Intel Core i7 processor and 16 GB of RAM. A fresh install of Fire Fox with no plugins was used for the browser and NGINX installed via Mac brew.
The following tests were performed for each grid:
Within each grid's folder the init_time test can be found.
This test measures the speed at which the grid is rendered after data is loaded.
Each grid also contains a filter_speed folder. This measures the application of
five filters to the 5 columns specified by the JSON data.
This test measures the speed of loading/importing the data into the grid, with a pre-defined buffer value. Where a buffer options does not exist, or is not accessible via the API, then a page size value is set. Typically the page size is associated with pagantion features.
In each instance 10 grids are drawn, so the time taken to render and re-render the data with a modified page size or buffer size can be measured.
For each grid this test can be found in the buffer_speed folder.
Each grid contains a scrolling_speed directory. This measures the FPS and time it takes to scroll each grid from top to bottom with data being loaded into the grid using the default
mechanisms with no modifications to buffer size or similar.
The client directory includes Sencha's implementation of the Ext JS grid and each of the competitor grids used in the performance test.
The server directory contains the raw data api used in performance testing backend to retrieve data.