1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Duluth, MN
    Posts
    126
    Vote Rating
    4
    badgerb1 is on a distinguished road

      0  

    Default isPainted takes a long time when there are a lot of controls on the screen

    isPainted takes a long time when there are a lot of controls on the screen


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,795
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Honestly, you have quite a lot rendered at once. Test with a 1/3 of that and see if things improve a lot more.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Duluth, MN
    Posts
    126
    Vote Rating
    4
    badgerb1 is on a distinguished road

      0  

    Default


    OK that's what I was afraid of.

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

    Thanks
    Bob

  4. #4
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Duluth, MN
    Posts
    126
    Vote Rating
    4
    badgerb1 is on a distinguished road

      0  

    Default


    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:'borderolid;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

  5. #5
    Sencha User farion's Avatar
    Join Date
    Feb 2008
    Location
    Karlsruhe, Germany
    Posts
    75
    Vote Rating
    11
    farion will become famous soon enough

      0  

    Default


    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

  6. #6
    Sencha User farion's Avatar
    Join Date
    Feb 2008
    Location
    Karlsruhe, Germany
    Posts
    75
    Vote Rating
    11
    farion will become famous soon enough

      0  

    Default


    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

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Posts
    18
    Vote Rating
    2
    anj is on a distinguished road

      0  

    Default


    Same problem here,

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

  8. #8
    Sencha Premium Member
    Join Date
    Aug 2010
    Posts
    24
    Vote Rating
    1
    jensen83 is on a distinguished road

      0  

    Default


    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?

  9. #9
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Duluth, MN
    Posts
    126
    Vote Rating
    4
    badgerb1 is on a distinguished road

      0  

    Default


    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi