Android webview późny rendering

Question

Napisałem aplikację głównie w JS (Mootools) i HTML, który jest ładowany do webview w mojej aplikacji.

To tylko jeden plik HTML, który pokazać lub ukryć części (elementy) na stronie poprzez dodanie lub usunięcie nodisplay Klasa:

.nodisplay {display:none} 
function showPage1() 
{ 
    $$('.pages').addClass('nodisplay'); 
    $('page1').removeClass('nodisplay'); 
} 

w Android 4 (Xperia Arc i Galaxy Note 2) Widzę dziwny późne renderowanie, ale nie wiem, jak zachowują się starsze wersje. kiedy ukrywam element i pokazuję inny, na początku wydaje się poprawny, ale podczas przewijania niektóre części starych elementów pojawiają się przez milisekundy i znikają natychmiast. To tak, jakby renderowanie niewidocznego obszaru zostało przełożone na moment rysowania.

A także czasami po prostu robi dziwne błyski podczas ukrywania i pokazywania.

W chrome na PC nie ma problemu. Nawet w AVD działa bardzo ostro bez żadnych mrugnięć.

Nie wiem, czy to jest problem z Androidem i czy jest jakiś sposób, aby go pokonać ?!

Próbowałem android:hardwareAccelerated="false"|"true", bez efektu. , a także ws.enableSmoothTransition(), która nie rozwiązuje problemu.

Answer 1

Odpowiedź Ajay dała mi wskazówkę dotyczącą czegoś, co wykorzystałem w innym projekcie, dzięki czemu mogłem uczynić przezroczyste tło WebView. Do tej pory nie wiedziałem, że kod wyłącza akcelerację sprzętową. Przetestowałem ten spokój kodu w tym projekcie i nie ma już późnego renderowania. chociaż przewijanie strony nie jest tak gładkie jak poprzednio, ale jest lepsze niż późniejsze renderowanie.

Jest to kod, aby naprawić to wszystko:

if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null); 

Nawiasem mówiąc, to jak definiowanie android:hardwareAccelerated="false" nie wpływa webview!

Answer 2

.nodisplay {height:0; display:none; }

pracował tutaj ...

Answer 3

Oto mój "Fix aplikacja WebView w jeden stos odpowiedzi (pierwsza edycja)":

Wyniki

przechowywać odnośniki do elementy strony w JS w celu zwiększenia wydajności. $('.page1') musi parsować DOM za każdym razem, gdy zmieniasz stronę i powinno to nastąpić tylko raz. Dotyczy to również $('.pages') - musi skanować & wykonywać operacje na wielu elementach. Zamiast tego sugeruję, aby zachować aktywne odniesienie do strony. Może powinien wyglądać mniej więcej tak:

function showPage(page) { // receive active page; page is the jQuery ref to the next page 
    activePage.addClass('nodisplay'); // activePage is the jQuery ref to the previous page 
    page.removeClass('nodisplay'); // show the page 
} 

Należy przeskanować całą aplikację i rozwiązać ten problem. Mogą nie wydawać się wielką sprawą, ale jestem przekonany, że mogą zrobić różnicę w mobilnym systemie operacyjnym, w którym zasoby są ograniczone.

zarządzanie DOM

Jeśli nie są już, powinno się używać szablonów. Oprócz pomocy w zarządzaniu aplikacją szablony pomagają w utrzymaniu DOM możliwie jak najlżejszego: zamiast mieć 100 elementów strony, możesz zacząć od 0 i tworzyć je w razie potrzeby. Aby osiągnąć maksymalną wydajność, upewnij się, że renderujesz każdy szablon tylko raz - przed renderowaniem sprawdź, czy strona już istnieje w DOM. Aby zobaczyć, jak wpływa to na Twoją aplikację, po prostu "reflow" przeglądarki.

Istnieje wiele narzędzi do tego zadania. Biorąc pod uwagę obecną konfigurację, możesz wybrać: http://mootools.net/forge/p/template. Oto kilka innych opcji: http://mustache.github.com/, http://underscorejs.org/#template, http://api.jquery.com/category/plugins/templates/.

UI

Również bardzo ważne, ale bardzo rozległy. Niektóre rzeczy, o których warto pamiętać:

• lekki, semantyczny i prawidłowych znaczników
• js powinien tylko zarządzać danymi & stan. Animacje i aktualizacje DOM spowolnią działanie. Korzystaj z przyjaznego środowiska css3, aby zoptymalizować obrazy i próbować ich używać tylko jako wizualizacji. Jeśli nie możesz tego uniknąć, sprite są zawsze dobrym pomysłem.

Debugowanie

może być bolesne. Odkryłem, że jesteśmy bardzo przydatni: http://people.apache.org/~pmuellr/weinre/docs/latest/. Reguły blokowe try ... catch! Coś, co pomoże w wyjściu logcat: http://jsharkey.org/blog/2009/04/22/modifying-the-android-logcat-stream-for-full-color-debugging/.

Podsumowując, oglądanie w Internecie wciąż jest trudnym środowiskiem i chociaż ostatnio stało się możliwą opcją, wymaga wiele przemyśleń i planowania, aby "dobrze to zrozumieć".

Mam nadzieję, że to pomoże.

Answer 4

Niewiele wiem o html z webkitem. Ale jeden z moich projektów miał problemy z przewijaniem z opóźnieniem w ukrywaniu i pokazywanie efektów przewijania. Mam włączoną akcelerację sprzętową dla wyświetlenia strony internetowej.

Prawdopodobnie powinieneś try this.

Answer 5

spróbuj tego kodu również, że pomógł mi dużo .. -webkit-transform: translateZ(0); można rzucić okiem na mojego kodu, w którym bardzo mi pomógł .. jquery toggle (show/hide) based on selector

Również spojrzeć na poniższy link; http://www.html5rocks.com/en/mobile/optimization-and-performance/