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.

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.

I suggest doing tests on empty grids :) – will be much faster!
Giulio, I don’t know why, but according to my expirience in most cases customers don’t want pages – just scrolling. And 10k rows is not the limit, btw… Although I agree this is not good for UI. But this is real life.

Thanks by the info, i really wanted to buy DHTMLX, but jqGrid is a half of price and works on unlimited projects, 50% of price for a penalization of 7% or 10% on performance, its ok for me, i will buy jqGrid. thanks again.

Well, if you do NOT need the source code, support and updates, then you’re right. Otherwise, the price is higher. And if you have at least 2 developers in the team, the dhtmlxSuite license (includes support, updates, and source code for unlimited number of developers) is cheaper.
If you’re happy with jqSuite, then it’s good for you :)

Mik,
let me know a customer that wants no pagination and I’ll send you my resume… I want work for him!!

IT’S NOT THE REAL WORLD !!!!

just thinking my callcenter customers or CRM users with all 500000 records in a page …. AHAHAH… please, be serious …
I wanna see a test with json data. All others test are nothing. we are in 2-0-1-2 :)

Not all functionality available in dhtmlxGrid is supported by ExtJs grid as well. Note that the above test compares the grids with similar settings. So without relations to grids’ feature set, the tested version of ExtJs grid shows quite a bad performance.

It would be nice if you can do ‘Loading Speed Tests’ against extjs 3.4.x and extjs 4.1.1a (stable versions). Extjs 4.0.7 cannot be considered as a production release, that is a big probelm with Sencha.

Or you can post your test code here I can do the comparisons with extjs 3.4.x/4.1.1a.

We are looking alternative for extjs 4.x.x because of the poor grid performance.