PDA

View Full Version : Optimizing performance



dannylib
8 Sep 2015, 2:35 PM
Hi,

I've got an application that is heavy on field usage. I noticed that adding new fields can be fairly expensive, even when using suspend/resumelayouts. Observing the timeline in Chrome, I can see quite a lot of recalculation of styles and forced layouts (seems like one per fields).
To make things simpler, my question is if the code below can be somehow optimized in any way. Right now pressing the button takes roughly ~2 seconds in Chrome and almost 4 in IE11.
Note that the fields must be rendered dynamically. I'm using ExtJS 4.1.



util = {
createTextField: function(myItemId) {
return Ext.create('Ext.form.field.Text', {
fieldLabel: 'Task' + myItemId + ':',
name: 'task',
itemId: myItemId,
autofocus: true,
enableKeyEvents: true,
labelAlign: 'left',
labelWidth: 50,
labelStyle: 'font-size: 16px;',
width: 500
});
}
}




Ext.onReady(function() {


Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
for(i=0; i<100; i++)
{
Ext.suspendLayouts();
formPanel.add(util.createTextField(i));
Ext.resumeLayouts(true);
}
}
});


var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
height: 600,
bodyPadding: 5,
autoScroll: true,


fieldDefaults: {
labelAlign: 'left',
labelWidth: 90
}});




formPanel.render('form-ct');


});

jdkhamba
8 Sep 2015, 3:29 PM
Your suspendLayouts() and resumeLayouts() call are within the for loop. Try putting them outside of the for loop. That is,

Ext.suspendLayouts();
for(i=0; i<100; i++)
{
formPanel.add(util.createTextField(i));
}
Ext.resumeLayouts(true);

Not sure how much difference that will make as rendering 100 text boxes will take time regardless.

dannylib
8 Sep 2015, 3:30 PM
Right, sorry, that was just a bug in my sample code. In my application they're outside the loop.
Unfortunately in my app the resumeLayouts is causing multiple forced layouts and style recalculations. Not sure why.

jdkhamba
8 Sep 2015, 3:34 PM
So are you saying that even by putting them outside the for loop doesn't help performance?

dannylib
8 Sep 2015, 3:36 PM
It does, it just invalidates my sample code as it no longer represents the problem.
What I'm seeing in my app, if I look at the Chrome timeline feature, are multiple calls to "Recalculate Style" and "Layout" all triggered by a single call to resumeLayouts. It looks like it's iterating over all the controls and calling "getWidth" which is what forces the layout.

jdkhamba
8 Sep 2015, 3:45 PM
I see. You may want to create a separate thread with a working fiddle which mimics the problem in your app as closely as possible. A live working example will definitely help to pin point the problem better.Try removing some of the configs in your textfield to see if any of them is causing an issue. Try using a container instead of a form panel to host the textfields although I doubt that would be of much help.