Sencha Touch 2 - Hiệu suất Android

Question

Chúng tôi đang phát triển ứng dụng Sencha Touch 2, sử dụng Phonegap để có thể cài đặt ứng dụng dưới dạng ứng dụng và truy cập bộ nhớ của thiết bị. Điều này hoạt động thực sự tốt trên iPad 2 và iPad 3. Tuy nhiên, khi chúng tôi cố gắng chạy ứng dụng trên thiết bị Android, hiệu năng hoạt động rất chậm. Các yếu tố chính làm chậm hệ thống là danh sách và băng chuyền. Khi chúng tôi thử nghiệm cùng một ứng dụng thông qua trình duyệt chrome, hiệu suất ngang bằng với ứng dụng của iPad.

Bạn có bất cứ đề xuất nào về những gì chúng tôi có thể làm để cải thiện hiệu suất trên Android, thậm chí có thể bỏ qua Phonegap cho một thứ hoạt động tốt hơn. Hoặc nếu chúng ta có thể buộc điện thoại chạy dưới dạng trình duyệt chrome.

Cảm ơn bạn đã dành thời gian & trợ giúp.

Answer 1

Sự cố bạn gặp phải ở đây là trình duyệt Android không sử dụng tăng tốc phần cứng đồ họa. Điều này có nghĩa là các thủ thuật tiêu chuẩn mà Sencha (và các thư viện HTML5 khác như jQueryMobile, iScroll vv ...) sử dụng để cung cấp hiệu suất cuộn tốt, chẳng hạn như CSS 3D biến đổi để khiến danh sách của bạn được hiển thị trong một lớp riêng biệt. sau đó được dịch sang phần cứng, sẽ không hoạt động trên Android. Thay vào đó, danh sách cuộn sẽ được thực hiện hoàn toàn bằng phần mềm, điều này sẽ rất chậm!

Trình duyệt Chrome, tuy nhiên cung cấp khả năng tăng tốc GPU. Thiết bị Android có nhiều khả năng mang lại trải nghiệm HTML5 tốt, đơn giản là trình duyệt chuẩn không tận dụng được phần cứng GPU. Trừ khi bạn có thể buộc người dùng cuối sử dụng Chrome (điều mà tôi nghi ngờ), tùy chọn duy nhất là làm giảm trải nghiệm người dùng và cung cấp giao diện người dùng đơn giản hơn cho người dùng Android một cách đơn giản.

Để biết thêm chi tiết, xem "IMPROVING THE PERFORMANCE OF YOUR HTML5 APP"

Answer 2

Hãy thử đặt cờ này trong AndroidManifest.xml của bạn: android: hardwareAccelerated = "true"

Answer 3

Cập nhật: Sau khi hiện nay làm việc với ST2 hơn còn bây giờ là hiệu suất thách thức trên Android chỉ là thứ bạn phải chấp nhận. Có rất nhiều điều bạn có thể làm để tránh các vấn đề về hiệu suất như giảm thính giả và sự kiện, giữ ánh sáng DOM của bạn (dưới 2000 nút) và thường tránh mọi biến đổi và hiệu ứng CSS3 (đặc biệt không hoạt động tốt trên Android)

Một điều cần xem xét là thay vì sử dụng WebView tích hợp, bạn có thể sử dụng trình duyệt CrossWalk và nhúng vào APK này.

https://crosswalk-project.org

Nó cho biết thêm một kích thước nhỏ để APK của bạn (15-20MB), nhưng nó thực hiện tốt hơn so với xây dựng trong WebView và mang lại sự ổn định và nhất quán với một nền tảng rất manh mún. Hãy xem xét thực tế rằng mọi WebView trên Android tùy thuộc vào thiết bị, nhà cung cấp và phiên bản hệ điều hành có thể khác nhau theo những cách nhỏ. CrossWalk sẽ cho phép bạn có phiên bản chính xác giống nhau trên tất cả các thiết bị Android 4.0 trở lên và loại bỏ mọi sự cố thiết bị hoặc nhà cung cấp cụ thể.

Không có dấu đầu dòng bạc cho hiệu suất trên Android. Tăng tốc đồ họa sẽ không cải thiện hiệu suất của việc thực thi javascript thuần túy hoặc thao tác DOM.Nếu bạn muốn hiểu tại sao, sau đó bắt đầu ở đây:

What's the difference between reflow and repaint?

Cũ hơn trả lời (vẫn có thể có giá trị):

Đối với ICS và trên các thiết lập sau trên webview sẽ cải thiện đáng kể hiệu suất render cho Sencha Touch trên Android:

mWebView.setLayerType(WebView.LAYER_TYPE_HARDWARE, null); 

Tuy nhiên, theo kinh nghiệm của tôi, điều này sẽ giới thiệu các tạo tác thành hiển thị CSS tùy theo thiết bị và nền tảng riation. Tôi đã không tìm thấy lý do cụ thể cho điều này và tôi không mong đợi Google sẽ giải quyết nó vì thành phần webview sẽ được thay thế bằng phiên bản mới hơn và tốt hơn trong Android 4.4.

https://developers.google.com/chrome/mobile/docs/webview/overview