Performance benchmarks: 2.1 vs 2.0.9 vs 1.8.4

The 3 main features of the previously released 2.1 version were performance, performance and performance. At the point of the release, we were quite confident we had made our components much faster, but that is not really enough without some benchmark data to back it up. We decided to produce some benchmarks comparing 1.8.4 (based on Ext JS 3), 2.0.9 (based on Ext 4.0.7) and 2.1 (based on Ext JS 4.1.0).

To put these versions to the test, we created a simple test case, testing 4 different scenarios:

  • 10 time columns, 10 rows
  • 50 time columns, 50 rows
  • 250 time columns, 250 rows
  • 500 time columns, 500 rows

The tests were executed on a Lenovo W510 which is a quite fast machine, and we used Firefox 12 and IE9 to run the tests. The test source can be seen below:

var data = [],
    x = 500;

for (var i = 0; i < x; i++) {
    data.push({ Id : i, Name : 'Res' + i });
}

var date = new Date();

var scheduler = new Sch.SchedulerPanel({
    viewPreset  : 'dayAndWeek',
    startDate   : new Date(2010, 0, 1),
    endDate     : Ext.Date.add(new Date(2010, 0, 1), Ext.Date.DAY, x),
    width       : 500,
    height      : 500,

    columns : [
        {header : 'Name', width:200, dataIndex : 'Name' }
    ],

    resourceStore : new Sch.data.ResourceStore({
        data : data
    }),

    eventStore : new Sch.data.EventStore({
        data : [
            ...
        ]
    })
})

scheduler.normalGrid.on('viewready', function() {
    console.log(new Date() - date);
});

scheduler.render(document.body);

The results of this test can be seen below:

Ext JS
Scheduler
Browser10x1050x50250x250500x500
3.4.01.8.4FF12110 ms230 ms9 s49 s
4.0.72.0.9FF12310 ms1.3 s23 s78 s
4.1.02.1.0FF12200 ms300 ms680 ms1.2 s
3.4.01.8.4IE960 ms280 ms12 s48 s
4.0.72.0.9IE9420 ms6 sXX
4.1.02.1.0IE9140 ms260 ms950 ms2 s

The numbers clearly show the results of the combined effort of Sencha's Ext JS 4.1 release, and our own performance tuning for v2.1.0. Additionally, there is also a noticeable difference in overall responsiveness when interacting with the Scheduler, but this is harder to measure and benchmark properly. This is a direct result of the reduced DOM footprint in v2.1.

We have a few more ideas for additional performance improvements for Scheduler 3.0, so stay tuned.

Comment ( 1 )

  • fbrus001

    That’s really awesome. We built a custom timeslider for adjusting the timespan shown by the Gantt panel (you can move the slider left and right as well as resize its thumb). On version 2.0, the poor redraw performance forced me to trigger a refresh once the user finished a drag operation on the slider. Now, I can refresh the panel as the user moves the slider around, and it all is really smooth and nice. Well done!

Leave a Comment