1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    5
    Vote Rating
    0
    federico80 is on a distinguished road

      0  

    Default css layout performance issue with sencha touch 2

    css layout performance issue with sencha touch 2


    Hi all
    we have found some performance problems when we add a component that is modal on the Viewport. This seems something related to this post http://www.sencha.com/forum/showthre...-on-the-screen .

    This problem arises also every time a selectfield is pressed and the relative picker is displayed.
    I've attached to this post a test page that reproduce this issue (i've renamed .txt the file, but is an html file).

    Using the SpeedTracer chrome plugin to profile the browser when pressing the selectfield, reveals that almost all the time is spent recalculating layout positioning of elements and not in js code.

    Thanks
    Federico.


    Attached Files

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    846
    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


    We won't have a lot of control over speeding up CSS and it doesn't surprise me it's going slow. You have quite a lot rendered at once. Using dataview with components triples the DOM size versus not using components.
    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 User
    Join Date
    Mar 2012
    Posts
    5
    Vote Rating
    0
    federico80 is on a distinguished road

      0  

    Default


    Hi mitchellsimoens
    Thank you very much for your response.
    I was afraid that the answer would be to reduce the number of components in the page, anyway i'am a bit surprised that the operation of putting a mask on the ViewPort could be so influenced by the page DOM size, i'm trying to figure out how this can be optimized and if the use of particular types of components layouts or 'docked' components within the viewport will affect the performance of creating a mask over the ViewPort.
    Any suggestions would be greatly (greatly) appreciated.

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    1
    Vote Rating
    0
    gverduci is on a distinguished road

      0  

    Default


    Hi,
    I have the same problem: components rendering requires a lot of time.
    A small increase in complexity of DataItem corresponds to an appreciably difference in rendering time of floating component.
    Any suggestions?

    Giuseppe

Thread Participants: 2