1. #1
    Ext JS Premium Member
    Join Date
    Apr 2011
    Posts
    93
    Answers
    1
    Vote Rating
    3
    adammascherin is on a distinguished road

      0  

    Default Unanswered: background image performance issues

    Unanswered: background image performance issues


    Hey I'm creating an app with a NavigationView and cards are pushed and popped from the view as necessary. I have applied CSS to add a background image to navigation view so it's the same across all cards. The first card has just a simple List, but it performs AWFULLY on an Samsung Note. When I say "it", I mean only scrolling the list itself.

    If I pull the same view up on an iPhone, it's a lot smoother. I understand that iPhone renders things differently and gives more priority to rendering, but why is android rendering SO much worse. Once I remove the background image, the android performs a lot smoother, but why does a 78kb background image kill the performance so much???

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


    This is purely Android rendering not being as good as iOS. The reason, Android doesn't like CSS3 so if you stress it much it doesn't handle it that well. This is just my observation
    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
    Ext JS Premium Member
    Join Date
    Apr 2011
    Posts
    93
    Answers
    1
    Vote Rating
    3
    adammascherin is on a distinguished road

      0  

    Default


    I understand this now but i think it's specific to only some manufacturers. I tried it on several samsung androids, including a new samsung with ICS and they all performed poorly with scrolling lists with background images.

    I tried it on an LG android and it worked quite smoothly, much better than the samsung androids, although still not as smooth as iOS. Strangley enough I tried on a 2yr old motorola android and it performed better than the brand new samsung android running ICS...

    Regarding your CSS3 comment, how is the css background property related to CSS3? I tried created a CSS3 gradient instead of the background and all androids seemed to perform much better. It only seems to be the background images that cause it to start lagging seriously. And the image wasn't even high res. I scaled it down to about a 25kb pixelly mess and the samsung androids still struggled with it.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,133
    Answers
    3504
    Vote Rating
    855
    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


    CSS3 is going to be the scrolling. Do to much to an Android and other things are going to be affected.

    Each manufacturer can have it's own webkit implementation so each manufacturer could react differently. For instance HTC and Sense UI fights with the browser to whom would have the tap.
    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.

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2011
    Posts
    93
    Answers
    1
    Vote Rating
    3
    adammascherin is on a distinguished road

      0  

    Default


    interesting. I guess I thought a simple background image is one of the most common css properties and would not be that much of a problem. I would have expected css gradients to cause more problems, but it was the other way around.

  6. #6
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    If you have a background image, it means it has to render much more the the screen. And that gets even worse when you have to scroll a list (every time it moves a pixel, it rerenders). If you have a simple block color, it has less to render.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  7. #7
    Sencha User
    Join Date
    Jan 2012
    Location
    Atlanta, GA
    Posts
    2
    Answers
    1
    Vote Rating
    0
    jonfoulkes is on a distinguished road

      0  

    Default


    We’ve also seen performance degrade on Android if CSS is pushed to hard, and yes, a simple image is sometimes worse than gradients. However, don’t abuse gradients and shadows, especially in long lists that will be scrolled.