developers - webview evaluatejavascript

Cómo mejorar el rendimiento del menú arrastrable de JS en WebView en Android

Question

Tenemos una aplicación web que se muestra en WebView en Android y tenemos un problema de rendimiento en las tabletas Android más antiguas con las que realmente necesitamos lidiar

• Estamos utilizando iScroll-lite para arrastrar javascript
• Establecemos la aceleración de hardware en verdadero, establecemos la prioridad de representación en alta y la vista web permite pasar solo un evento táctil MOVE en un intervalo de 80 ms

¿Hay algo más que podamos hacer?
¿Hay tal vez alguna alternativa más rápida a iScroll-lite?

No sabemos qué es exactamente lo que lo hace tan lento. Por ejemplo, se ejecuta en el teléfono Sony Erricson con 1 GHz, 512 MB de RAM con Android 2.3 sin problemas, pero en la tableta Qualcomm 1 GHz, 512 de RAM con Android 4.0 hace un esfuerzo y realmente tiene que esperar para ver cualquier resultado. La única diferencia que veo en la versión de Android y la resolución de la pantalla.

Answer 1

¿Qué pasa con el uso de div con desbordamiento configurado en automático y luego aplicar esta corrección para que los elementos se puedan desplazar?

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

Extracto corto:

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);
}

Answer 2

Hemos intentado que iScroll funcione correctamente en una aplicación de Phonegap en el iPad (2/3), pero no pudimos hacer que eso sucediera. Acérquese a un rendimiento aceptable, a pesar de que todos los ejemplos independientes funcionaron de manera súper fluida. Finalmente, terminamos usando -webkit-overflow-scrolling:touch ¿ -webkit-overflow-scrolling:touch has visto ese? Sé que necesitas esto para Android, así que no puedo decir si es tan bueno como en iOS6, pero en el iPad funcionó a la perfección.

Answer 3

Mi sugerencia es que escribas el arrastre por ti mismo. No es dificil. La parte clave del código se ve a continuación:

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
});

Puede encontrar muchos ejemplos de código here (por ejemplo, /assets/www/scripts/novas/framwork/nova.Carousel.js, también el scroller.js). Debería leer el código de muestra para aprender a escribir su propio "arrastre".

Si aún no tiene idea, puede ponerse en contacto con nuestro equipo para completar su tarea por usted. Hacemos apps de Phonegap con muy buen rendimiento.

Answer 4

Puede que no sea el Javascript después de todo. Las vistas web de Android tienden a tener problemas de rendimiento bastante inesperados.

Intente desactivar todos los CSS innecesarios y ver si mejora el rendimiento. Si es así, puedes volver a agregar los estilos CSS de forma iterativa para localizar al culpable.

Y no utilices ningún tipo de GIF animados. Nuestra experiencia es que esto (extrañamente) reduce drásticamente el rendimiento.

Answer 5

Si realmente quieres marcar una diferencia, te sugiero mi enfoque:

Hice una función de JavaScript para crear otra vista web ("webview infantil") que usaría como un iframe y llenaría con contenido, por lo que desde la aplicación JS podría hacer:

insertWebView (x,y,w,h,"<div>.......</div>").

Tienes que hacer un trabajo de una sola vez para establecer una forma de comunicar ambas vistas web, pero entiendes la idea. A continuación encontrará la fuente de mi función insertWebView para inspiración.

La mejora fue impresionante, ya que esas diminutas vistas web de iframe no solo funcionaron de manera impresionante, sino que cosas como el deslizador brillante, multitouch (¡ahora son distintas vistas web!), Etc. proporcionaron una experiencia casi nativa.

También hice una extensión para usar arrastrar y soltar nativo entre vistas web.

Probablemente no fue muy eficiente en cuanto a memoria, pero en términos de experiencia de usuario, creo que valió la pena el esfuerzo, mil veces.

¡buena suerte!

public void insertWebView(int code, int x0, int y0, int w, int h, String url, int vertical, String initContent, String params, int alpha, int rot, int screenId) {

        PlasmaWebView webview1 = getWebView(code);

        if (webview1 != null) {
            if (Conf.LOG_ON) Log.d(TAG, "WEBVIEW: Reusing  webview " + code + " at " + x0 + "," + y0 + "," + w + "," + h + " vertical " + vertical+", rot="+rot);
            webview1.setVerticalScrollBarEnabled(vertical == 1);
            webview1.setHorizontalScrollBarEnabled(vertical != 1);
            webview1.move(x0, y0, w, h, Funq.this);
            if ((alpha>0) && (alpha<100)) webview1.setAlpha((float)alpha/100);
            webview1.setRotation((float)rot/10);
            webview1.handleTemplateLoad(url, initContent);
            return;
        } 

        if (Conf.LOG_ON) Log.d(TAG, "WEBVIEW: Insert webview " + code + " at " + x0 + "," + y0 + "," + w + "," + h + " vertical " + vertical + " url " + url+" alpha "+alpha+", rot="+rot);

        webview1 = new PlasmaWebView(Funq.this.getBaseContext(), code, vertical==1, useHardware, jvs, screenId);
        if ((alpha>0) && (alpha<100)) webview1.setAlpha((float)alpha/100);
        webview1.setRotation((float)rot/10);

        RelativeLayout.LayoutParams p=webview1.createLayout(x0, y0, w, h, Funq.this);
        layerContainer.addView(webview1, p);
        webview1.handleTemplateLoad(url, initContent);
    }