Slow scrolling and DOM node explosion

4 posts, 2 answers
  1. Bart
    Bart avatar
    12 posts
    Member since:
    Mar 2013

    Posted 12 Jun 2013 Link to this post

    In our project with a Kendo UI Mobile ListView control, I've noticed very slow/jaggy/flickering scrolling on Android. The framerate is low, and the scroll effect is far from smooth.

    Investigating this problem, I came across the following weird behavior in the simulator's debugger, regarding memory consumption. When I mouse move or scroll in the simulator, there is an explosion of DOM elements/nodes that are created.

    I suspect these two issues are related.

    On-device the CPU and Memory remain stable when the app is not in use. Only when I scroll, the scroll animation slows down. The problem does not appear on an iPhone 4S. Because it also happens on a Nexus 4, I do not believe this is a CPU capacity problem.

    It is possible to easily reproduce this issue with the standard Cross-Platform Device Application (Kendo UI Mobile) project in Icenium. Simply open the debugger, go to the Timeline tab, select Memory in the left bar, and press the record button in the bottom toolbar. Then move your mouse over the screen canvas, and perform scrolls. It will generate a similar graph as the one attached.

    Environment:
    I'm using Icenium 2013.2.530.1 and a newly created project using Kendo UI Mobile v2013.1.319.
    Android 2.3.6 on a Samsung Galaxy S2, and Android 4.2.2 on Nexus 4.
  2. Answer
    Steve
    Admin
    Steve avatar
    10941 posts

    Posted 13 Jun 2013 Link to this post

    Hello Bart,

    In general for Android devices, performance is pretty subjective as it depends on the device hardware capabilities and Android version being run. It could be something simple as your phone being cluttered by some background processes, try closing anything unrelated or restarting your phone.

    Another thing to try changing is the Hardware Acceleration option in Properties/Android. On some devices turning it on speeds things up, but on some slows them down. You can experiment to disable Hardware Acceleration following these steps:
    1. Device Settings > Developer options > Force GPU rendering: (checked)
    2. In Icenium > Project Properties > Android > Hardware Acceleration: On
    3. Delete application from device and redeploy
    You can also try the opposite Force GPU rendering: (checked) and  Hardware Acceleration: Off and see which works best for you.

    About the debugger in the simulator, the problem with the DOM nodes has already been fixed and would be part of the upcoming 1.6 version of Icenium.

    Regards,
    Steve
    Telerik

    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Missed our first webinar, watch it here.
    Share feedback and vote for features on our Feedback Portal.
  3. Answer
    Bart
    Bart avatar
    12 posts
    Member since:
    Mar 2013

    Posted 14 Jun 2013 Link to this post

    Hi Steve, thanks for your prompt response. Great to hear that the DOM issue has already been fixed for the next release.

    I've tried your suggestions to disable and enable hardware acceleration support. It did not prove significant difference in performance on my Samsung Galaxy S2 Android device. However, tracing the performance issues further, I found that by disabling all CSS, scrolling is very smoothly, even with lots of records and images in the ListView.

    I'm now investigating which CSS rules cause the slowdown, and found that floats, and position relative/absolute are the major troublemakers. I'd love to see some guidance from the Kendo UI team, especially how to customize layout for ListView records without impacting the scrolling performance.
  4. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 14 Jun 2013 Link to this post

    Hello Bart,

    I guess updating your S2 to the latest official 4.1.2 would make a difference as the webview implementation in latest Android has improved quite a bit compared to the one in 2.x.

    As for the Kendo UI performance issues, I can forward this thread to the Kendo UI guys or you can contact them via the premium forums or stackoverflow for further insight.

    Regards,
    Steve
    Telerik

    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Missed our first webinar, watch it here.
    Share feedback and vote for features on our Feedback Portal.
Back to Top