[4.2.0 beta 2] a very simple/small remoter grid: performance compare to 3.4.x

[jimmylu98]

I modified a sencha example remote grid (see attached files) to compare performance with 3.4.x. It is a very simple and small remote grid (6 columns and 27 rows data). I do following initial grid load measurements and tested with FF16 on same machine/same network.

(1) Program start ( Ext.onReady) to grid render time.
(2) Program start to grid view ready time.
(3) Store before load to store load time.
(4) Program start to store load time.

All measured times with extjs4.2.0(beta2) and extjs 4.1.1a are at least 30%-50% slower than extjs 3.4.x. (#4 above item: .370 seconds vs .200 seconds ).

Anyone has some kind of performance with extjs 4.1.x/4.2.x, or just me. Any methods to tune the performance to match 3.4.x? If this is a performance issue with extjs 4.1/4.2, I hope extjs 4.2.x release would at least pay an attention to improve the performance of simple grid.

Most of my applications are similar to above remote grid, but with language translation, filter, column hide/show at initial load. They perform very well with extjs 3.4.x (less than .5 seconds with FF), but with extjs4.1.1a, users feel slowness (1-4 seconds with FF). Not sure how to use Ext.suspendLayouts() / Ext.resumeLayouts(), and/or store.suspendEvents() / store.resumeEvents() to improve performance for the grid initial load data.

I am a Premium Member, but no sencha support answer my 4.1.1a question yet: http://www.sencha.com/forum/showthre...ch-extjs-3.4.x.

4.2.0 test code: ( 3.4.x test code and remote data in zip file).

Ext.onReady(function() {

    var startTime = new Date().getTime();
    Ext.QuickTips.init();

    //Ext.suspendLayouts();
    Ext.define('Product', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'id',
            type: 'int'
        }, {
            name: 'company'
        }, {
            name: 'price',
            type: 'float'
        }, {
            name: 'date',
            type: 'date'
        }, {
            name: 'visible',
            type: 'boolean'
        }, {
            name: 'size'
        }]
    });

    var beforeloadtime ='', loadtime =''; 
    var store = Ext.create('Ext.data.JsonStore', {
        autoDestroy: true,
        model: 'Product',
        proxy: {
            type: 'ajax',
            url: 'grid-filter.json',
            reader: {
                type: 'json',
                root: 'data',
                idProperty: 'id',
                totalProperty: 'total'
            }
        },
        remoteSort: false,
        sorters: [{
            property: 'company',
            direction: 'ASC'
        }],
    listeners: {    
        beforeload: {  
            fn: function() {
                beforeloadtime = new Date().getTime();
            }
        },
        load: {  
            fn: function() {
                loadtime = new Date().getTime();    
                var dt =  loadtime -  beforeloadtime;
                var dt2 =  loadtime - startTime;
                //store.resumeEvents()
                console.info( ' extjs4.x total store load time (from store beforeload to load = '+ dt);
                console.info( ' extjs4.x total time (from start to store load = '+ dt2);
            }
        },
        datachanged: {
            fn: function() {
                var headerCt = grid.getComponent(0).headerCt,
                      headers = headerCt.getGridColumns(),
                        index =  headerCt.items.findIndex('dataIndex', 'size'), 
                    myCol = headers[index];
                //myCol.setVisible( false ); 
            }

        }
    }
    });
  
    var grid = Ext.create('Ext.grid.Panel', {
        border: false,
        store: store,
        columns: {
            defaults: { sortable: true }, 
        items: [{
                    dataIndex: 'id',
                    header: 'Id',
            flxe: 1,
            }, {
                    dataIndex: 'company',
                    header: 'Company',
            flxe: 1,
                    id: 'company'
            }, {
                    dataIndex: 'price',
            flxe: 1,
                    header: 'Price'
            }, {
                    dataIndex: 'size',
            flxe: 1,
                    header: 'Size'
            }, {
                    dataIndex: 'date',
            flxe: 1,
            header: 'Date',
                    renderer: Ext.util.Format.dateRenderer('m/d/Y')   
            }, {
                    dataIndex: 'visible',
            flxe: 1,
                    header: 'Visible'
            }]
    },
        loadMask: true,
        dockedItems: [Ext.create('Ext.toolbar.Paging', {
            dock: 'bottom',
            store: store
        })],
        listeners: {
        afterlayout: {
                fn: function(){         
           // console.info( '  afterlayout  =' );
                }
            },
        viewready: {
                fn: function(){
            var endTime = new Date().getTime() - startTime;
            console.info( '  extjs4.x total view ready time (from start to view ready )  = '+ endTime);
                }
            },
            render: {
                fn: function(){
            var endTime = new Date().getTime() - startTime;
            console.info( '  extjs4.x total render time (from start to render ) = '+ endTime);
           // store.suspendEvents();
                    store.load({
                        params: {
                            start: 0,
                            limit: 50
                        }
                    });
                }
            }
        },
        emptyText: 'No Matching Records',
        title: 'Grid Filters Example',
        height: 400,
        width: 700,
        layout: 'fit',
    renderTo: Ext.getBody(),
    });


}); 

[mankz]

I'd guess it's related to the number of layout cycles performed (which reads a lot from the DOM, getStyle etc). Here's a short blog post I did on how to count those: http://www.bryntum.com/blog/improvin...a-performance/

[jimmylu98]

Thanks. Will the patch apply to extjs 4.2 release? Then cannot wait to see the 4.2 release. (not sure how to use the patch - couldn't find 'AssertionGrid class' ).

Yes, with attached simple test codes, you will see three times 'afterlayout' with 4.2, and twice with 3.4.

I'd guess it's related to the number of layout cycles performed (which reads a lot from the DOM, getStyle etc). Here's a short blog post I did on how to count those: http://www.bryntum.com/blog/improvin...a-performance/

[mankz]

Sorry, I wrote it a bit confusing - I don't work for Sencha. I just showed a simple way of measuring the nbr of layout cycles. You can try to measure this number in your test case to see how many layouts are performed.

[jimmylu98]

Thanks.

Hope sencha developers can find methods to reduce unnecessary layouts with extjs 4.2 release.

[aw1zard2]

You should Define things outside of onReady.
Moving from 3.4 to 4.2 we haven't seen any slowness but that is because we optimize the library to only what we need.

Used JS Builder and now Sencha Command. Was getting 2.5k rows with 30 columns loading in about 1-2 seconds with 3.4 and 4.2 on IE8 WinXP SP3, so it just depends on how you have things structured and configured.

We also have a Proof of Concept in which we made an Ext JS 3.4 grid display 10,000 rows in IE7 in 1 second. But we had to tweak how the rendering was working on that.
The same page in Chrome showed all 10,000 rows in 0.5 seconds. FF was around 0.75 seconds for the 10,000 rows.