Loading Speed Tests Show The Fastest JavaScript Grid

| Leave a comment

While rich internet technologies are developing and improving, people expect web apps to provide desktop-like performance and user experience. Since data grids are one of the most important part of enterprise web apps, we have decided to check how quickly the popular JavaScript grids are loaded on a page with a large number of rows and columns.

We have tested four grid components:

 

For our tests, we created a demo for each grid that initializes a grid on a page with different number of rows and columns. If you want to make sure that the results are objective and check the loading speed by yourself, download the demo here.

Grid with Large Number of Rows

At first, we set up a demo of each grid that has 10 columns and different number of rows (from 100 to 10,000). We tested the grids in IE9 and the latest Google Chrome. The charts below show the time of initialization of the grid on a page in dependence to the number of rows.

Results in IE9:

Dojo jqGrid Ext JS dhtmlxGrid
100 rows 308 ms 60 ms 265 ms 51 ms
500 rows 312 ms 61 ms 282 ms 58 ms
1,000 rows 324 ms 63 ms 305 ms 61 ms
5,000 rows 368 ms 94 ms 512 ms 65 ms
10,000 rows 469 ms 143 ms 702 ms 67 ms
Grid Loading Speed - Large Number of Rows

Grid Loading Speed - Large Number of Rows

 

Results in Chrome:

Dojo jqGrid Ext JS dhtmlxGrid
100 rows 171 ms 43 ms 91 ms 25 ms
500 rows 174 ms 54 ms 102 ms 26 ms
1,000 rows 178 ms 55 ms 135 ms 27 ms
5,000 rows 193 ms 88 ms 317 ms 29 ms
10,000 rows 226 ms 143 ms 654 ms 32 ms
Grid Loading Speed - Large Number of Rows

Grid Loading Speed - Large Number of Rows

 
Results in IE8:

Dojo jqGrid Ext JS dhtmlxGrid
100 rows 915 ms 236 ms 310 ms 68 ms
500 rows 964 ms 270 ms 380 ms 71 ms
1,000 rows 1,124 ms 301 ms 511 ms 79 ms
5,000 rows 1,396 ms 642 ms failed 100 ms
10,000 rows 1,805 ms 1,049 ms failed 135 ms

 

Results in FireFox 11:

Dojo jqGrid Ext JS dhtmlxGrid
100 rows 500 ms 146 ms 319 ms 70 ms
500 rows 529 ms 148 ms 343 ms 74 ms
1,000 rows 540 ms 154 ms 384 ms 75 ms
5,000 rows 610 ms 258 ms 696 ms 78 ms
10,000 rows 694 ms 369 ms 1,082 ms 80 ms

 

Results in all browsers for grid with 10,000 rows and 10 columns:

Dojo jqGrid Ext JS dhtmlxGrid
IE9 418 ms 148 ms 702 ms 67 ms
Chrome 226 ms 143 ms 654 ms 32 ms
IE8 1,805 ms 1,049 ms failed 135
FireFox 11 694 ms 369 ms 1,082 ms 80 ms
Speed Test Results - Grid with 10,000 Rows

Speed Test Results - Grid with 10,000 Rows

According to the tests, dhtmlxGrid has the shortest loading time and loads on the page faster than others. While the number of rows increases, the difference in the loading time becomes more visible.

 
Grid with Large Number of Columns

This is a less popular scenario but we also tested the grids with large number of columns (the number of rows stays the same – 1,000). The charts display initialization time of each grid in dependence to the number of columns.

Results in IE9:

Dojo jqGrid Ext JS dhtmlxGrid
10 columns 325 ms 69 ms 301 ms 60 ms
50 columns 734 ms 139 ms 1,316 ms 172 ms
100 columns 1,226 ms 281 ms 2,702 ms 298 ms
1,000 columns 12,379 ms 4,331 ms failed 5,692 ms
Grid Loading Speed - Large Number of Columns

Grid Loading Speed - Large Number of Columns

Results in Chrome:

Dojo jqGrid Ext JS dhtmlxGrid
10 columns 171 ms 45 ms 142 ms 28 ms
50 columns 519 ms 152 ms 589 ms 62 ms
100 columns 1,004 ms 267 ms 1,237 ms 102 ms
1,000 columns 8,712 ms 2,858 ms failed 1,176 ms
Grid Loading Speed - Large Number of Columns

Grid Loading Speed - Large Number of Columns

Not all grids have stood the test with 1,000 columns. Ext JS grid has failed to load the data and others showed a significant increase of initialization time (that’s why we didn’t include the results for 1,000 columns in the charts).

Although jqGrid was faster in IE9, dhtmlxGrid has won the race in Google Chrome. So now we have a good reason to say that dhtmlxGrid is one of the fastest JavaScript grids on the web. Download dhtmlxGrid, JavaScript datagrid library, and check it by yourself.