PDA

View Full Version : Optimize ExtJS Application



same66
18 Feb 2011, 2:32 AM
Hi,

I'm coding a web application with ExtJS 3.3.
I'm on a web desktop (extjs demo) and when I open a window, the javascript is really slow.

All panel in the window contain many component (Button, Combo, Grid...) who are initialized by JSON.

How is possible to optimize the javascript to accelerate the loading component creation ?

I have minify my javascript and optimize with the Ext.getCmp remove in my code.

Do you know an other method to accelerate loading ?

Thank

mitchellsimoens
18 Feb 2011, 5:19 AM
Not being able to see any code I would say this:

Just because you minify code doesn't make it good code.

carl23934
18 Feb 2011, 5:47 AM
You can do a lot of optimizations on the HTTP server sending the data. Enable gzip compression, setup proper caching so that the extjs framework files expire far into the future. Additionally using as much lazy loading (xtypes) as possible will allow you to use the most optimized rendering by only rendering components when they are needed.

Be sure you are not using the debug files when you deploy (ie. ext-all-debug.js should change to ext-all.js when you deploy).

same66
18 Feb 2011, 6:28 AM
Hi,
thanks for your answer.

I'm trying to convert my code to use xtype instead of initializing the components.
But, I have an other problem.
I don't know how to add listener for xtype component

thanks in advance for your help

mitchellsimoens
18 Feb 2011, 6:29 AM
{
xtype: "panel",
...
listeners: {
afterrender: someFunction
}
}

mschwartz
18 Feb 2011, 6:30 AM
...
{
xtype: 'whatever',
listeners: {
render: function() {
alert('render');
},
destroy: function() {
alert('destroy');
}
...
}
},
...

mitchellsimoens
18 Feb 2011, 6:32 AM
...
{
xtype: 'whatever',
listeners: {
render: function() {
alert('render');
},
destroy: function() {
alert('destroy');
}
...
}
},
...


I win!

mschwartz
18 Feb 2011, 6:33 AM
I win!

You certainly do!

same66
18 Feb 2011, 6:33 AM
Thanks :D

It's perfect !


If you have any idea to accelerate the javascript execution...

mschwartz
18 Feb 2011, 6:37 AM
Get a faster computer?

Get a faster internet connection?

Seriously, you're not giving us much to go on.

Firebug and chrome dev tools have all the features you need to figure out what network transactions are taking a long time.

carl23934
18 Feb 2011, 7:47 AM
YSlow is a firefox plugin created by Yahoo that will analyze a page and show you what you can do to speed it up.

I recently optimized a website that would take over 1 second to load (non ext even!). Moving a few javascript files around, consolidating stylesheets and remove all unnecessary stuff dropped the load time to under 200ms.

There are a lot of good resources out there such as Steve Souders book "Even Faster Websites"
(http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304)