Jak poprawić wydajność JS Draggable menu w WebView na Androida

Question

Mamy aplikacji internetowych pokazano na WebView na Androidzie i mamy problem z wydajnością na starszych tabletów z systemem Android, które naprawdę musimy radzić sobie z

• używamy iScroll-lite dla javascript przeciąganie
• Stawiamy sprzętową akcelerację true, ustawić priorytet oddawania do wysokiej i WebView przepuszcza tylko jeden ruch dotykowy zdarzenia w odstępie 80ms

Czy jest coś więcej w e może zrobić?
Czy jest jakaś szybsza alternatywa dla iScroll-lite?

Nie wiemy, co sprawia, że ​​jest tak wolno. Na przykład działa na telefonie Sony Erricson z 1 GHz, 512 MB pamięci RAM z Androidem 2.3 płynnie, ale na tablecie Qualcomm 1GHz, 512 RAM z Androidem 4.0 robisz opór i musisz poczekać, aby zobaczyć jakikolwiek wynik. Jedyna różnica, jaką widzę w wersji Android i rozdzielczości ekranu.

Answer 1

To może nie być JavaScript. Android WebViews mają zwykle dość nieoczekiwane problemy z wydajnością.

Spróbuj dezaktywować wszystkie niepotrzebne pliki CSS i sprawdź, czy wydajność się poprawia. Jeśli tak, możesz ponownie dodać style CSS w sposób iteracyjny, aby zlokalizować sprawcę.

I nie używaj żadnych animowanych plików GIF. Nasze doświadczenie jest takie, że (co dziwne) drastycznie obniża wydajność.

Answer 2

Staraliśmy się, aby iScroll działał sprawnie w aplikacji phonegap na iPadzie (2/3), ale nie udało się nam tego dokonać. Osiągnij niemalże zadowalającą wydajność, nawet jeśli wszystkie samodzielne przykłady działały wyjątkowo sprawnie. W końcu wylądowaliśmy używając -webkit-overflow-scrolling:touch, czy już to sprawdziłeś? Wiem, że potrzebujesz tego dla Androida, więc nie mogę powiedzieć, czy jest tak dobry jak na iOS6, ale na iPadzie działał jak czar.

Answer 3

Moja sugestia jest taka, że ​​sam piszesz opór. To nie jest trudne. Kluczową część kodu wygląda następująco:

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

Można znaleźć wiele kod przykładowy here (np /assets/www/scripts/novas/framwork/nova.Carousel.js, również scroller.js). Powinieneś przeczytać przykładowy kod, aby nauczyć się pisać własne "przeciągnij".

Jeśli nadal nie masz pojęcia, możesz skontaktować się z our team, aby zakończyć swoje zadanie za Ciebie. Wykonujemy aplikacje phonegap z bardzo dobrą wydajnością.

Answer 4

Co za pomocą div z przepełnienie ustawiony na auto, a następnie zastosowanie tej poprawki tak, że elementy mogą być przewijane

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

Krótki wyciąg:

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

Jeśli chcesz naprawdę coś Różnica, proponuję ci moje podejście:

Zrobiłem funkcję podpowiadania JavaScript do utworzenia kolejnego WebView ("webvie dziecko" W "), które mogę używać jak iframe i wypełnić treścią, tak ze stosowania JS mogłem zrobić:

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

trzeba popracować jednorazową do stabilish sposób komunikować zarówno WebViews, ale Masz pomysł. Poniżej znajdziesz źródło mojej funkcji insertWebView dla inspiracji.

Udoskonalenie było niesamowite, ponieważ te niewielkie wyświetlenia stron internetowych typu "iframe" nie tylko wyświetlały się znakomicie, ale takie rzeczy jak świecące przeskoki, multitouch (teraz są to różne odsłonacze!) Itp. Zapewniały niemal natywne wrażenia.

Zrobiłem też rozszerzenie, aby użyć natywnego przeciągania i upuszczania między przeglądarkami.

Prawdopodobnie nie było to bardzo wydajne pod względem pamięci, ale jeśli chodzi o wrażenia użytkownika, uwierz mi, że było to warte wysiłku, tysiąc razy.

powodzenia!

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