Hybrid View

  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    117
    Vote Rating
    9
    Bunchofstring will become famous soon enough

      0  

    Default Maximizing carousel swipe performance...

    Maximizing carousel swipe performance...


    When swiping through Lists in my Carousel, the drag and slide animation stutters enough to prevent the switch to the next card. I'm testing in PhoneGap 2.0 on a dual-core Android device running 4.0.3 (which should have hardware acceleration). I'm also using ST2.0.1.1.

    The Problem
    Even when I use an empty string for the itemTpl of each list, the swipe stutters. I suspect the problem is one of these things:
    1. A touch event handler on the list is interfering with the swipe behavior of the carousel. FYI, I have directionLock enabled on the scrollable lists within the carousel.
    2. Applying an itemTpl when a card is painted (off-screen in this case) blocks the main thread long enough to disrupt the swipe
    Model for success
    As a test, I set up a simple carousel of images (no dataview), and the performance is great! The dragging and slide animations are both responsive and smooth.

    I've looked into the Discover Music and its massive carousel, but no help there. I've looked all over this forum, but the solution escapes me. Can anyone help me out on this? Thanks in advance for any advice
    Last edited by Bunchofstring; 8 Aug 2012 at 12:17 AM. Reason: Mis-stated my testing setup

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Posts
    117
    Vote Rating
    9
    Bunchofstring will become famous soon enough

      0  

    Default


    Update: Playing with the bufferSize (which isn't documented today) config option for my carousel showed moderate improvement. My latest discovery is that on Chrome for Android, the performance is excellent.

    What puzzles me still is why Chrome outperforms the PhoneGap webview even though both are hardware accelerated. Another curiosity is that turning hardware acceleration on or off in PhoneGap has no noticeable affect (either way, the simple image carousel works just fine, and the carousel of lists stutters).

    Back to the drawing board...

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    117
    Vote Rating
    9
    Bunchofstring will become famous soon enough

      3  

    Default


    Closing Update: I think I have it well optimized now. It was a two-part improvement. The first as I've said above is that I increased the buffer size to 4, meaning that in addition to the active item, the four previous and next cards are also loaded in the DOM. The second part was much trickier and more specific to my app.

    I'll explain by example. When my carousel loads, it has cards as follows: [1] 2 3 4 5, where [#] indicates the active card. It seems that the stutter in the swipe animation was caused in the transition to 1 [2] 3 4 5 6, when the 6th card is added to the DOM and painted (which triggered some XTemplate functions that do some fairly sophisticated calculations to calculate two numbers for each list item). By optimizing my XTemplate functions (roughly 150% faster now), I have all but eliminated the stutter.

    I learned three important lessons:
    1. Doing CRUD on LocalStorage-proxied records (especially many at a time) blocks the main browser/webview thread, so it's generally not a good idea to directly manipulate records using animated UI controls.
    2. If some functionality isn't mentioned in the documentation, it may be in the framework source code. Check in the component class config for options that are supported, but not documented.
    3. DataViews can be pseudo-bound to multiple stores, but using hasMany associations to get related data is too slow. Building custom RegEx patterns made a HUGE difference.
    TLDR: Setting the carousel buffer size can improve performance in certain situations. XTemplates can be pseudo-bound to multiple stores, but OOTB hasMany associations are too slow to perform well in that case. LocalStorage CRUD blocks the main thread (affecting animation, etc.)

  4. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,135
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Great topic and explanations! I wish I noticed this a week ago..

    I'm sure this will also improve when new devices come standard with Hardware Acceleration

    +1

  5. #5
    Touch Premium Member hotdp's Avatar
    Join Date
    Nov 2010
    Location
    Denmark
    Posts
    603
    Vote Rating
    14
    hotdp will become famous soon enough

      0  

    Default


    Hi,
    Is your test device HTC? I am having issues with fast swiping on a HTC One.

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Posts
    117
    Vote Rating
    9
    Bunchofstring will become famous soon enough

      0  

    Default


    Quote Originally Posted by hotdp View Post
    Hi,
    Is your test device HTC? I am having issues with fast swiping on a HTC One.
    Yes, I'm using an HTC Incredible 4G LTE (ADR6410L)

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar