Loading Speed Tests Show The Fastest JavaScript Grid

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:

Dojo grid (v.1.7.2)
jqGrid (v.4.3.2)
Ext JS grid (v.4.0.7)
dhtmlxGrid (v.3.0)

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

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

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

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

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

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.

Loading Speed Tests Show The Fastest JavaScript Grid

Advance your web development with DHTMLX

Related posts: