Come migliorare le prestazioni dei menù trascinabili JS in WebView su Android

Question

Abbiamo un'applicazione web indicato in WebView su Android e non abbiamo problema di prestazioni su tavolette vecchie Android che abbiamo veramente bisogno di trattare con

• Stiamo utilizzando iScroll-lite per javascript trascinamento
• Abbiamo impostato l'accelerazione hardware su true, la priorità di rendering impostato su alto e il WebView lascia passare solo una mossa evento di tocco a 80ms intervallo

c'è qualcosa di più w e può fare?
C'è forse qualche alternativa più veloce a iScroll-lite?

Non sappiamo cosa lo renda così lento. Ad esempio funziona su Sony Erricson con 1 GHz, 512 MB di RAM con Android 2.3 senza problemi ma su tablet Qualcomm a 1 GHz, 512 RAM con Android 4.0 fai un trascinamento e in realtà devi aspettare per vedere qualsiasi risultato. L'unica differenza che vedo nella versione di Android e nella risoluzione dello schermo.

Answer 1

Dopo tutto potrebbe non essere il Javascript. Android WebViews tende ad avere problemi di prestazioni abbastanza inaspettati.

Provare a disattivare tutti i CSS non necessari e vedere se le prestazioni migliorano. In tal caso, è possibile aggiungere nuovamente gli stili CSS in modo iterativo per individuare il colpevole.

E non utilizzare alcun tipo di GIF animate. La nostra esperienza è che questo (stranamente) abbatte drasticamente le prestazioni.

Answer 2

Abbiamo provato a far funzionare perfettamente iScroll in un'app per smartphone su iPad (2/3), ma non siamo riusciti a farlo accadere. Andare ovunque vicino ad un accettabile in termini di prestazioni, anche se tutti gli esempi stand-alone è andato benissimo. Finalmente abbiamo finito con l'utilizzo di -webkit-overflow-scrolling:touch hai già esaminato quello? So che ne hai bisogno per Android, quindi non posso dire se è buono lì come su iOS6, ma sull'iPad ha funzionato come un fascino.

Answer 3

Il mio suggerimento è che si scrive il trascinamento da soli. Non è difficile. La parte fondamentale del codice simile di seguito:

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

È possibile trovare il codice di esempio molti here (ad esempio, anche i /assets/www/scripts/novas/framwork/nova.Carousel.js scroller.js). Dovresti leggere il codice di esempio per imparare come scrivere il tuo "trascinamento".

Se non hai ancora idea, puoi contattare our team per completare il tuo compito. Realizziamo app phonegap con ottime prestazioni.

Answer 4

Cosa succede ad usare div con troppopieno impostato su automatico e quindi applicare questa correzione in modo che gli elementi possono essere fatti scorrere

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

estratto 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 5

Se si vuole fare davvero un differenza, ti suggerisco il mio approccio:

Ho eseguito una funzione JavaScript richiamabile per la creazione di un'altra WebView ("Webvie figlio" w ") che avrei usato come un Iframe e riempire con il contenuto, in modo da dall'applicazione JS che potevo fare:

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

quello che devi fare un certo lavoro di una volta a stabilish un modo per comunicare entrambi visualizzazioni, ma hai un'idea. Di seguito trovi la fonte della mia funzione insert WebView per l'ispirazione.

il miglioramento è stato eccezionale, così come quelle piccole iframe-visualizzazioni non solo eseguite impressionante, ma roba come l'Overscroll incandescente, multitouch (ora sono diverse visualizzazioni!), Ecc fornito un'esperienza quasi native.

Ho anche eseguito un'estensione per utilizzare il trascinamento nativo tra le visualizzazioni Web.

Probabilmente non era molto efficiente dal punto di vista della memoria, ma in termini di esperienza utente credetemi ne valeva la pena, mille volte.

buona fortuna!

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