Làm thế nào để cải thiện hiệu suất của trình đơn kéo JS trong WebView trên Android

Question

Chúng tôi đã một ứng dụng web hiện trong WebView trên Android và chúng tôi có vấn đề hiệu suất trên máy tính bảng Android cũ hơn mà chúng ta thực sự cần phải đối phó với

• Chúng tôi đang sử dụng iScroll-lite cho javascript kéo
• Chúng tôi thiết lập tăng tốc phần cứng là true, thiết lập ưu tiên vẽ đến cao và WebView cho phép thông qua chỉ có một MOVE sự kiện liên lạc trong 80ms khoảng

có điều gì hơn w e có thể làm gì?
Có thể có giải pháp thay thế nhanh hơn cho iScroll-lite không?

Chúng tôi không biết chính xác điều gì làm cho nó quá chậm. Ví dụ chạy trên điện thoại Sony Erricson với 1 GHz, 512 MB RAM với Android 2.3 mượt mà nhưng trên máy tính bảng Qualcomm 1GHz, 512 RAM với Android 4.0 bạn thực hiện một thao tác kéo và bạn thực sự phải chờ xem kết quả nào. Sự khác biệt duy nhất tôi thấy trong phiên bản Android và độ phân giải màn hình.

Answer 1

Sau tất cả, nó có thể không phải là Javascript. Android WebView có xu hướng có các vấn đề về hiệu suất khá bất ngờ.

Hãy thử tắt tất cả CSS không cần thiết và xem hiệu suất có cải thiện hay không. Nếu vậy, bạn có thể thêm lại các kiểu CSS theo định kỳ để xác định vị trí thủ phạm.

Và không sử dụng bất kỳ loại GIF động nào. Kinh nghiệm của chúng tôi là điều này (kỳ lạ đủ) kéo xuống hiệu suất mạnh mẽ.

Answer 2

Chúng tôi đã cố gắng để iScroll hoạt động trơn tru trong ứng dụng điện thoại trên iPad (2/3), nhưng chúng tôi không thể thực hiện điều đó. Nhận bất kỳ nơi nào gần một hiệu suất có thể chấp nhận được mặc dù tất cả các ví dụ độc lập đều chạy siêu mượt mà. Cuối cùng chúng tôi đã kết thúc bằng cách sử dụng -webkit-overflow-scrolling:touch bạn đã xem xét điều đó chưa? Tôi biết bạn cần điều này cho Android vì vậy tôi không thể nói nếu nó là tốt như trên iOS6, nhưng trên iPad nó làm việc như một say mê.

Answer 3

Đề xuất của tôi là bạn tự viết tự kéo. Nó không khó. Các phần quan trọng của mã trông như dưới đây:

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

Bạn có thể tìm thấy nhiều mẫu mã here (ví dụ /assets/www/scripts/novas/framwork/nova.Carousel.js, cũng là scroller.js). Bạn nên đọc mã mẫu để tìm hiểu cách viết "kéo" của riêng bạn.

Nếu bạn vẫn không có ý tưởng, bạn có thể liên hệ our team để hoàn thành nhiệm vụ của mình cho bạn. Chúng tôi làm cho các ứng dụng phonegap có hiệu suất rất tốt.

Answer 4

gì về việc sử dụng div với tràn thiết lập để tự động và sau đó áp dụng sửa chữa này để các phần tử có thể được cuộn

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

trích ngắn:

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

Nếu bạn muốn thực sự làm cho một sự khác biệt, tôi khuyên bạn nên tiếp cận của tôi:

Tôi đã thực hiện chức năng JavaScript có thể gọi để tạo một WebView khác ("webvie con w ") mà tôi sẽ sử dụng như Iframe và điền với nội dung, vì vậy từ các ứng dụng JS tôi có thể làm:

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

Bạn đã làm một số công việc một thời gian để stabilish một cách để comunicate cả WebViews, nhưng bạn có được ý tưởng. Vui lòng tìm bên dưới đính kèm nguồn hàm insertWebView của tôi để lấy cảm hứng.

Cải tiến thật tuyệt vời, vì những khung nhìn trang web nhỏ này không chỉ hoạt động tuyệt vời mà còn có các công cụ như mở rộng ghi đè, cảm ứng đa điểm (giờ đây là các lần xem web khác nhau!).

Tôi cũng đã thực hiện tiện ích mở rộng để sử dụng tính năng kéo và thả gốc giữa các lần xem web.

Có lẽ nó không hiệu quả về trí nhớ, nhưng về mặt trải nghiệm người dùng, tôi tin rằng nó đáng để nỗ lực, hàng ngàn lần.

chúc may mắn!

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