Hybrid View

  1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

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

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


    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).
    PHP Code:
    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', {
            
    autoDestroytrue,
            
    model'Product',
            
    proxy: {
                
    type'ajax',
                
    url'grid-filter.json',
                
    reader: {
                    
    type'json',
                    
    root'data',
                    
    idProperty'id',
                    
    totalProperty'total'
                
    }
            },
            
    remoteSortfalse,
            
    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', {
            
    borderfalse,
            
    storestore,
            
    columns: {
                
    defaults: { sortabletrue }, 
            
    items: [{
                        
    dataIndex'id',
                        
    header'Id',
                
    flxe1,
                }, {
                        
    dataIndex'company',
                        
    header'Company',
                
    flxe1,
                        
    id'company'
                
    }, {
                        
    dataIndex'price',
                
    flxe1,
                        
    header'Price'
                
    }, {
                        
    dataIndex'size',
                
    flxe1,
                        
    header'Size'
                
    }, {
                        
    dataIndex'date',
                
    flxe1,
                
    header'Date',
                        
    rendererExt.util.Format.dateRenderer('m/d/Y')   
                }, {
                        
    dataIndex'visible',
                
    flxe1,
                        
    header'Visible'
                
    }]
        },
            
    loadMasktrue,
            
    dockedItems: [Ext.create('Ext.toolbar.Paging', {
                
    dock'bottom',
                
    storestore
            
    })],
            
    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: {
                                
    start0,
                                
    limit50
                            
    }
                        });
                    }
                }
            },
            
    emptyText'No Matching Records',
            
    title'Grid Filters Example',
            
    height400,
            
    width700,
            
    layout'fit',
        
    renderToExt.getBody(),
        });


    }); 
    Attached Files

  2. #2
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,777
    Vote Rating
    112
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    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/

  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default


    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.

    Quote Originally Posted by mankz View Post
    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/

  4. #4
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,777
    Vote Rating
    112
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    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.

  5. #5
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default


    Thanks.

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

  6. #6
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    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.

  7. #7
    Ext Premium Member halcwb's Avatar
    Join Date
    Mar 2010
    Location
    Rotterdam
    Posts
    381
    Vote Rating
    52
    halcwb has a spectacular aura about halcwb has a spectacular aura about halcwb has a spectacular aura about

      0  

    Default


    As a suggestion, you might wrap the load between a grid.suspendEvents and grid.resumeEvents, this way the grid won't trigger any reloading in between the initial load.

  8. #8
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default


    Quote Originally Posted by halcwb View Post
    As a suggestion, you might wrap the load between a grid.suspendEvents and grid.resumeEvents, this way the grid won't trigger any reloading in between the initial load.
    Are you talking about the code like below? If yes, it is still need 3 layouts same as without grid.suspendEvents and grid.resumeEvents and the performance is about same.

    PHP Code:
                render: {
                    
    fn: function(){
                var 
    me this;
                   
    me.suspendEvents(); 
                            
    store.load();
                   
    me.resumeEvents();
                    }
                } 
    As I said, the patch in this thread will reduce 3 layouts to 2 layouts( same as extjs 3.4.x), it also prevents any layout due to column show/hide and grouping.

  9. #9
    Ext Premium Member halcwb's Avatar
    Join Date
    Mar 2010
    Location
    Rotterdam
    Posts
    381
    Vote Rating
    52
    halcwb has a spectacular aura about halcwb has a spectacular aura about halcwb has a spectacular aura about

      0  

    Default


    Quote Originally Posted by jimmylu98 View Post
    Are you talking about the code like below? If yes, it is still need 3 layouts same as without grid.suspendEvents and grid.resumeEvents and the performance is about same.

    PHP Code:
                render: {
                    
    fn: function(){
                var 
    me this;
                   
    me.suspendEvents(); 
                            
    store.load();
                   
    me.resumeEvents();
                    }
                } 
    As I said, the patch in this thread will reduce 3 layouts to 2 layouts( same as extjs 3.4.x), it also prevents any layout due to column show/hide and grouping.
    I don't think your implementation is correct, remember the load happens asynchronously, so you'll need to resume in the load handler like:

    PHP Code:
                render: {
                    
    fn: function(){
                var 
    me this;
                   
    me.suspendEvents(); 
                   
    store.load(function () { 
                                 
    // Store load ready, resume events
                                 
    me.resumeEvents();
                    });
                    }
                } 
    But I have to admit, I did not do any testing of this myself.

  10. #10
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default


    Quote Originally Posted by halcwb View Post
    I don't think your implementation is correct, remember the load happens asynchronously, so you'll need to resume in the load handler like:

    PHP Code:
                render: {
                    
    fn: function(){
                var 
    me this;
                   
    me.suspendEvents(); 
                   
    store.load(function () { 
                                 
    // Store load ready, resume events
                                 
    me.resumeEvents();
                    });
                    }
                } 
    But I have to admit, I did not do any testing of this myself.
    Thank you.

    As tested in a simple example, it does have some performance improvement, but less than the patch in the proxy.