Extjs - Performance tuning

Things which can improve performance

Minimize network latencyCheck event listenersUse the afterrender and onrender event only when necessaryRemove doLayout and doComponentLayoutReduce container nestingUse container instead of Panels when possibleUse Ext.suspendLayouts and Ext.resumeLayouts when adding or removing a lot of components or elementsWatch out for leakageBatching

 

1.       Minimize network latency

Parallel your downloads

a.       Browser has limit on number of concurrent network connections to any one domain

b.      Avoid 404 errors – Server calls responding with 404 errors can be used to download other resources which will result fast loading of application.

c.       Load all your css files first. Script load blocks browser .

Concatenate and compress resources

d.      Use sencha SDK tools to build a single minified JavaScript file

 

2.       Check event listeners

Manage your event listeners
E.g.
                You might set event to fire first time when store get data.
                If you don’t want same event to fire each time when store get data use single:true
                listeners: { 
                                load: onFirstLoadData, 
                                single: true 
                }

 

3.       afterrender and onrender

The afterrender event is invoked after all DOM elements already exist, changing element after rendering causes reflows.

Use beforerender event to set styles and classes.

With ExtJs 4.1 you can use new event, boxready. It runs after the size of component has been determined. You can consider it as option to afterrender event.

 

4.       Remove doLayout and doComponentLayout

doLayout or doComponentLayout should be needed for is when the DOM is directly changed by application code.

ExtJs framework is unaware of such changes, these calls are needed to update the affected layouts.

 

5.       Reduce container nesting

Each container takes time to initialize, render and layout. So the more you get rid of unneeded nested containers, the faster your application will run.

 

6.       Use container instead of Panels when possible

By default xtype is ‘panel’

Panels are more powerful and expensive than basic containers

When you need to group your fields and does not require toolbars or headers , use Container.

Panel should be used when you require such features like pagination , title, bottom bar(bbar).

 

7.       Ext.suspendLayouts and Ext.resumeLayouts

ExtJs 4.1 provides two methods, Ext.suspendLayouts and Ext.resumeLayouts

Each time you add or update component, causes layout and render operations to be performed.
{ 
                Ext.suspendLayouts(); 
                // batch of updates         
                Ext.resumeLayouts(true); 
}

While doing multiselect operations on the grid or inserting/deleting multiple records use it.

 

8.       Watch out for leakage

        Ext.define('MyClass', {
                        ... 
                        constructor: function(config) { 
                                        ... 
                                        this.store.on('load', function() { 
                                                        ... 
                                        }, this); 
                        } 
        });

The new listener function is created each time this constructor runs. This not takes time but potentially could leak loads of memory.

                Ext.define('MyClass', { 
                                ... 
                                constructor: function(config) { 
                                                ... 
                                                this.store.on('load', this.onStoreLoad, this); 
                                }, 
                                onStoreLoad: function() { 
                                                ... 
                                } 
                });

In this case the listener function is created once and store on the class, each instance will share the same function. Overhead of creating the function is reduced to one and there is no risk of a leaky closure.

 

9.       Batching

record.beginEdit(); 
record.set('name', 'Tom'); 
record.set('age', 17); 
record.set('member', true); 
record.endEdit();

record.set({ 
                name: 'Tom', 
                age: 17, 
                member: true 
});

// slow

container.add(panel); container.add(button); container.add(grid);

// fast 
container.add(panel, button, grid);