Loading Speed Tests Show The Fastest JavaScript Grid

| Comments (32)

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.

 

Comments

  1. A April 4, 2012 at 9:19 pm

    With which version of ExtJS was this tested?

  2. Mats April 4, 2012 at 9:28 pm

    var version = ‘4.0.7’, Version;

    Should use Ext JS 4.1 RC2 instead, grid speed is a lot better.

  3. Derrick April 4, 2012 at 9:50 pm

    @Mats

    Use an RC2 product to do a speed comparison?

    That would only be helpful if you suggest people start using RC2 in their live production sites.

  4. Mats April 4, 2012 at 10:11 pm

    Well, why not? Traditionally the last RC in any release cycle should be a mature version and only minor issues left. Afaik RC2 is the last RC before 4.1GA.

    • Les April 4, 2012 at 11:42 pm

      Yes, I’d suggest using Ext JS 4.1 RC2… It’s a lot more stable compared to 4.0.7 and the comparo would be interesting

  5. Czeslaw April 5, 2012 at 12:08 am

    I don’t get why tests are made on IE9 and Chrome as still the most popular is IE8 and Firefox. But oh well…

  6. Semika April 5, 2012 at 7:48 am

    I have used Dojo in few moths. Not only the grid, the UI components are also heavy. It renders a lots of elements even for a simple check box.
    That is worse.

  7. giulio April 5, 2012 at 3:28 pm

    I have tried with extjs 4.1 but is slowly than 4.0 ….

    this is not the question… I have choosen extjs that I think is the best (i used all 4 frameworks for working) …

    there is no one that load 10000 and more rows in a table …. and without pagination!!!

    Do the right test using json proxy for loading data and then republish the results!

    • Mik April 6, 2012 at 5:41 pm

      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.

  8. Andrew April 6, 2012 at 6:03 am

    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.

    • Ivan April 6, 2012 at 11:26 am

      Andrew, the price for dhtmlxGrid for unlimited products (including 1-year support and updates subscription) is $449, the same as for jqGrid. Not sure where you found the 50% price difference.

      • Andrew April 8, 2012 at 5:01 am

        jqSuite (not jqGrid) —> $450 / http://www.trirand.net/licensing.aspx
        dhtmlxSuite –> $1146 / http://www.dhtmlx.com/docs/products/licenses.shtml

        ok, 450 is not the 50% of 1146 :-)

        Thanks again.

        • Ivan April 9, 2012 at 1:32 pm

          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 :)

  9. bucker April 6, 2012 at 7:43 pm

    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 :)

    • Ivan April 9, 2012 at 7:11 pm

      In all demos we used JSON datasource.

      • bucker April 10, 2012 at 1:28 am

        but not in this test

        • Alexandra April 10, 2012 at 3:47 pm

          Bucker, in which demo you have not found JSON data? JSON objects are used in all of them.

  10. Brian May 6, 2012 at 6:28 pm

    Keep up the great work DHTMLx!

    I’m curious as to which is the fastest way to load a DHTMLx grid, json or xml?

    • Ivan May 7, 2012 at 2:22 pm

      Brian, the JSON is a more compact format and weighs less so the grid populated with JSON data is loaded faster.

  11. navindian May 19, 2012 at 6:58 pm

    Can you try with trend graphs chart and provide the results?

  12. sachin September 5, 2012 at 2:53 pm

    how can draw a line chart with the help of dhtmlx grid.

  13. German, November 20, 2012 at 5:16 am

    Non are valid arguments, non of the functionality offered by ExtJS 4.1 grid is available in dhtmlx grid.

    • Inga December 20, 2012 at 5:58 pm

      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.

  14. Jorge Bastidas February 5, 2013 at 10:15 pm

    Yea try exporting 500 records from IE9, grab a cup of coffee, a few doughnuts and flip to the sci-fi channel for a while.

  15. Jimmy Lu February 6, 2013 at 12:53 am

    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.

  16. Ashutosh Singh Parmar November 21, 2013 at 12:35 pm

    Hello
    I am using DHTML Grid standard version.
    With IE8 it takes around 30,000 ms for 500 rows with 18 columns.

    Very poor performance in IE8.

    Wrong data presented here in this blog.

    • Ivan November 22, 2013 at 4:35 pm

      Ashutosh, we have tested the grid demo (you can find the link in the article) in IE8.

      With 500 rows and 18 columns it takes:
      – 643 ms with disabled smart rendering
      – 46 ms with enabled smart rendering

      If you have performance issues with dhtmlxGrid in IE8, you can contact our team on the forum and provide your demo. Our technical team will help to solve this issue.

  17. Kishor Dhaduk August 10, 2014 at 10:48 pm

    Hi i would like to know that i can use dhtmlxGrid in my aspx page.

Leave a Reply