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:

The results of this test can be seen below:

Ext JS
Browser 10×10 50×50 250×250 500×500
3.4.0 1.8.4 FF12 110 ms 230 ms 9 s 49 s
4.0.7 2.0.9 FF12 310 ms 1.3 s 23 s 78 s
4.1.0 2.1.0 FF12 200 ms 300 ms 680 ms 1.2 s
3.4.0 1.8.4 IE9 60 ms 280 ms 12 s 48 s
4.0.7 2.0.9 IE9 420 ms 6 s X X
4.1.0 2.1.0 IE9 140 ms 260 ms 950 ms 2 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.

  1. fbrus001 06/19/2012, 1:04 pm Reply

    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

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>