Wie Leistung von JS ziehbar Menü in WebView auf Android verbessern

Question

Wir sind eine Web-Anwendung haben in WebView auf Android gezeigt und wir haben Performance-Problem auf älteren Android-Tablets, die wir wirklich mit

• beschäftigen müssen wir verwenden iScroll-lite für Javascript ziehen
• Wir Hardware-Beschleunigung auf true gesetzt Rendering Priorität zu hoch und die WebView einstellen können nur durch einen MOVE Berührungsereignis in 80ms-Intervall

gibt es etwas w kann ich tun?
Gibt es vielleicht eine schnellere Alternative zu iScroll-lite?

Wir wissen nicht, was genau es so langsam macht. Es läuft zum Beispiel auf dem Handy Sony Erricson mit 1 GHz, 512 MB RAM mit Android 2.3 reibungslos, aber auf dem Tablet Qualcomm 1GHz, 512 RAM mit Android 4.0 Sie ziehen, und Sie müssen tatsächlich warten, um ein Ergebnis zu sehen. Der einzige Unterschied sehe ich in Android-Version und Bildschirmauflösung.

Answer 1

Es ist vielleicht nicht das Javascript doch. Android WebViews haben eher unerwartete Leistungsprobleme.

Versuchen Sie, alle unnötigen CSS zu deaktivieren und sehen Sie, ob sich die Leistung verbessert. Wenn dies der Fall ist, können Sie die CSS-Stile erneut hinzufügen, um den Schuldigen zu finden.

Und keine animierten GIFs verwenden. Unsere Erfahrung ist, dass dies (komischerweise) die Performance drastisch verschlechtert.

Answer 2

Wir haben versucht, iScroll reibungslos in einer phonegap-App auf dem iPad (2/3) zu betreiben, aber das konnten wir nicht realisieren. Erreichen Sie eine akzeptable Leistung, obwohl alle Standalone-Beispiele sehr flüssig laufen. Wir haben schließlich am Ende -webkit-overflow-scrolling:touch haben Sie schon in diesem einen Blick? Ich weiß, dass du das für Android brauchst, also kann ich nicht sagen, ob es dort so gut ist wie auf iOS6, aber auf dem iPad funktionierte es wie ein Zauber.

Answer 3

Mein Vorschlag ist, dass Sie den Ziehvorgang selbst schreiben. Es ist nicht schwer. Der wichtigste Teil des Codes sieht unten wie:

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

Sie können viele Beispielcode here (z /assets/www/scripts/novas/framwork/nova.Carousel.js, auch die scroller.js) finden. Sie sollten den Beispielcode lesen, um zu erfahren, wie Sie Ihr eigenes "Ziehen" schreiben können.

Wenn Sie noch keine Idee haben, können Sie our team kontaktieren, um Ihre Aufgabe für Sie zu beenden. Wir machen Phonegap-Apps mit sehr guter Leistung.

Answer 4

Was mit Überlauf über die Verwendung von div auf auto gesetzt und dann diesen Fix angewendet haben, so dass können Elemente

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

Kurz Extrakt gescrollt werden:

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 5

Wenn Sie wirklich wollen, um ein machen Unterschied, ich würde Ihnen meinen Ansatz vorschlagen:

Ich habe eine JavaScript-Aufruffunktion zum Erstellen eines anderen WebView ("Kind Webvie w "), dass ich wie ein Iframe und fülle mit Inhalten verwenden würde, so von der JS-Anwendung ich tun kann:

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

Sie haben einige einmalige Arbeit zu tun, einen Weg zu stabilish beide WebViews comunicate, aber Du hast die Idee. Im Folgenden finden Sie die Quelle meiner insertWebView-Funktion zur Inspiration.

Die Verbesserung war großartig, da diese kleinen iframe-webviews nicht nur genial waren, sondern auch Sachen wie das leuchtende Overscroll, Multitouch (jetzt sind sie verschiedene Webviews!) Usw. eine nahezu native Erfahrung lieferten.

Ich habe auch eine Erweiterung gemacht, um natives Ziehen und Ablegen zwischen Webviews zu verwenden.

Wahrscheinlich war es nicht sehr effizient Speicher-weise, aber in Bezug auf Benutzerfreundlichkeit glauben Sie mir, es war die Mühe wert, tausend Mal.

viel Glück!

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