View Full Version : Maximizing carousel swipe performance...

7 Aug 2012, 10:11 AM
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:

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.
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 :D

8 Aug 2012, 12:32 AM
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...

16 Aug 2012, 9:22 PM
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:

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.
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.
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.)

17 Aug 2012, 7:41 AM
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 :)


14 Nov 2012, 2:18 AM
Is your test device HTC? I am having issues with fast swiping on a HTC One.

2 Jan 2013, 1:52 PM
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)