PDA

View Full Version : isPainted takes a long time when there are a lot of controls on the screen



badgerb1
11 Apr 2012, 10:54 AM
Hi All,

So I have this issue. I have a card in a view that shows about 37 segmented buttons and 37 regular buttons on 3 separately scrollable panels, plus a few other panels/toolbars/etc.

When I click on one of the buttons it is supposed to show a modal panel. Showing this panel is taking approximately 4-7 seconds. By doing a CPU profile on the system it seems that the Ext.define.isPainted function is taking up most of the time.

Anybody have any hints as to why or what I can do to alleviate this? I think it has to do with the number of components on the screen because exactly the same functionality (button popping up the same popup) is extremely quick on another card in the same view.

This is the section of code that is slow. And stepping through the code shows that it is slow only when looking at this popup panel, and then again when it is looking at the mask for the popup. But only on this card, on other cards this is very fast.

isPainted: function() {
var dom = this.dom;
return Boolean(dom && dom.offsetParent);
},

It doesn't appear to be much going on here, so I'm stumped now.

Thanks
Bob

mitchellsimoens
11 Apr 2012, 11:42 AM
Honestly, you have quite a lot rendered at once. Test with a 1/3 of that and see if things improve a lot more.

badgerb1
11 Apr 2012, 11:43 AM
OK that's what I was afraid of.

Figured I'd see if there was a different choice.

Thanks
Bob

badgerb1
13 Apr 2012, 1:54 PM
Found some interesting things here.

The issue only seems to occur when the panel is either flexed or is a diect descendant of the fullscreen viewport. I.E. when I put the panel with all the controls and the popups in another panel and make sure I'm not flexing the bad panel, the popups work quickly even with (literally) 160 other segmented controls on the screen in two other panels. When I put either a flex:1 or add the bad panel directly to the viewport, the popups are extremely slow (up to 40 sec on an ipad).

Still working out a full solution but thought I'd share this quirk.

Here's some code of my test situation.


launch:function() {

Ext.Viewport.add(
{
xtype:'tenkey',
width:'450px',
height:'450px',
itemId:'thetenkey',
hidden:true,
modal:true,
hideOnMaskTap:true,
cls:'mobile-rounded-rec-big',
style:'border:solid;background-color:white'
}
);


Ext.Viewport.add(
{
xtype:'container',
topLevel:'b',
layout:'hbox',
items:[


{
xtype:'container',
scrollable:true,
layout:'vbox',
width:250,
items:[
{// This will popup the tenkey panel loaded above.
xtype:'tenkeyentryfield',
tenkeyid:'thetenkey',
popup:true
},
-----------80 segmented controls -----------------]
},
{
xtype:'container',
scrollable:true,
layout:'vbox',
width:250,
items:[----------------80 more segmented controls --------------]
}, { layout:'fit',
transitionMask:true,
scrollable: false,
items:[------------bad panel with about 100 more controls ------]
}

]
}
);


Ext.Viewport.add(
{ layout:'fit',
transitionMask:true,
topLevel:'b',
scrollable: false,
items:[------------ same config set as above bad panel with about 100 more controls ------]
});
});


}


When I am viewing the "topLevel:'a'" card in the viewport, xtype:'tenkey' (and any other popups) pop OK. (under 10 sec on ipad)

When I am viewing the topLevel:'b' card in the viewport it takes up to 40 seconds to pop up the xtype:'tenkey' on an ipad

If I change the panels in topLevel:'a' to have a flex:1 on each of the columns, the topLevel:'a' now also takes up to 40 seconds to popup the xtype:'tenkey'.

Not sure what this means yet but figured it's a shot that someone may have an idea.

Thanks
Bob

farion
3 May 2012, 4:19 AM
I have the same problem.

I only show an Ext.Msg.prompt dialog. 98% of time is needed for isPainted.

We also have a lot of controls visible.

Regards farion

farion
3 May 2012, 9:02 AM
It seems, that the big performance blocker is dom.offsetParent.

dom.offsetParent takes 7/8 of time.

If I use parentNode, the dialog comes up 8! time faster. Of course, not everything is working with that ... but the dialog do. Also the complete app starts a lot faster.

My numbers are depending on my dom, of course. For another setup the performance loss will be different.

So my question is, why is offsetParent in use here. Is there an alternative?

Btw. offsetParent is not part of the W3C specification.

Regards Farion

anj
8 May 2012, 1:51 AM
Same problem here,

what we additionally see, is that the performance on chrome is much slower than on safari.

jensen83
10 May 2012, 1:33 AM
I have the same problem and did some profiling...

whereas isPainted takes 40% of computing time on a certain action (fade in of a panel) in Chrome Browser, Safari only uses 3.6% on isPainted and is a lot faster.

Why does Safari outperform Chrome so much on this?

badgerb1
10 May 2012, 5:15 AM
Hi Guys,

I did finally figure a few things out.

If you set the width and height of the viewport or some subcontainer that contains the component that you are trying to pop the new popup next to (popup.showby(component)), then the popup appears quickly.

This seems to also primarily happen when using flexed vbox and hbox layouts, if you change the flex to an appropriate percentage width or height, the problem goes away also. (probably because you are effectively setting a "fixed" width or height).

Note: We were seeing the issue severely on the iPAD version of Safari. Desktop Chrome with my development box wasn't slow enough to be a concern until we tested on that device.

I have noticed that Desktop Safari does work better than Chrome when it comes to the -webkit css3 extensions and seems snappier overall. I think it's the css engine that is a little better in Safari.

Thanks
Bob