How to improve performance of JS draggable menu in WebView on Android

Question

We have a web application shown in WebView on Android and we have performance issue on older Android tablets that we really need to deal with

• We are using iScroll-lite for javascript dragging
• We set hardware acceleration to true, set rendering priority to high and the WebView lets through only one MOVE touch event in 80ms interval

Is there anything more we can do?
Is there maybe some faster alternative to iScroll-lite?

We don't know what exactly makes it so slow. It for example runs on phone Sony Erricson with 1 GHz, 512 MB RAM with Android 2.3 smoothly but on tablet Qualcomm 1GHz, 512 RAM with Android 4.0 you make a drag and you actually have to wait to see any outcome. The only difference I see in Android version and screen resolution.

Answer 1

It might not be the Javascript after all. Android WebViews tend to have quite unexpected performance issues.

Try to deactivate all unnecessary CSS and see if performance improves. If so, you can re-add the CSS styles iteratively to locate the culprit.

And do not use any kind of animated GIFs. Our experience is that this (strangely enough) drags down performance drastically.

Answer 2

My suggestion is that you write the drag by yourself. It's not difficult. The key part of code looks like below:

var yourDomElement = document.getElementById("demoDrag");
yourDomElement.addEventListener("touchstart", function (e) {
    e.preventDefault();
    //todo
});
yourDomElement.addEventListener("touchmove", function (e) {
    //todo: 
});
yourDomElement.addEventListener("touchend", function (e) {
    //todo
});

You can find many sample code here (e.g. /assets/www/scripts/novas/framwork/nova.Carousel.js, also the scroller.js). You should read the sample code to learn how to write your own "drag".

If you still have no idea, you can contact our team to finish your task for you. We make phonegap apps with very good performance.

Answer 3

What about using div with overflow set to auto and then applying this fix so that elements can be scrolled

http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/

Short extract:

function touchScroll(id){
    var el=document.getElementById(id);
    var scrollStartPos=0;

    document.getElementById(id).addEventListener("touchstart", function(event) {
        scrollStartPos=this.scrollTop+event.touches[0].pageY;
        event.preventDefault();
    },false);

    document.getElementById(id).addEventListener("touchmove", function(event) {
        this.scrollTop=scrollStartPos-event.touches[0].pageY;
        event.preventDefault();
    },false);
}