Problemy z wydajnością jonowego 2 przewijania

Question

Jestem pod wrażeniem blogów i recenzji o ionic2 i Angular2, zacząłem pisać aplikacje w jonowym 2 i odkryłem, że wydajność przewijania ionic2 nie jest dobra dla dużej liczby rekordów zarówno dla systemu iOS, jak i Androida.

1. Mam dużą listę elementów z pomiędzy obrazami w większości z elementów listy
2. Występ przewijania jest dobre dla 10 do 20 pozycji, ale jego bardzo powolny, jeśli chodzi o 30+ przedmioty
3. po wielu znaleziono Wirtualna zwój jonowe i używane to wtedy wydajność nieznacznie poprawiła się na 50 pozycji, ale po raz kolejny powolny 65+ szt

próbowałem WKWebview w iOS, mają pewną poprawę w wydajności, ale często ekran staje na czarny dla dużych list, więc odrzucam ten pomysł. Nie chcę korzystać z przejścia dla pieszych ze względu na wzrost wielkości aplikacji, więc nigdy nie próbowałem.

Czy ktoś może pomóc zasugerować jakiekolwiek obejście tego problemu lub rozwiązania czystego javascript do wyświetlania dużych list bez żadnych problemów? zarówno dla Androida, jak i ios.

Answer 1

Przewijanie to jedna z najczęstszych interakcji z aplikacją mobilną i niezwykle ważne jest, aby była odpowiednia. Natywne aplikacje mają listy, które płynnie przewijają się, reagują na dotyk i zmiany kierunków, przyspieszają i zwalniają w sposób, który wydaje się naturalny.

użycie Spróbuj wirtualnej Zwój Ionic2

wirtualnej Scrolling rozwiązuje ten problem. W Ionic 1 nazywał się Collection Repeat, w Ionic 2 nazywa się Virtual Scroll, ale jest to koncepcja szeroko stosowana w rozwoju aplikacji mobilnych HTML5. Podstawową ideą jest to, że tworzymy wystarczającą ilość elementów w DOM, aby wyświetlić dane listy, które są aktualnie na ekranie, i poddajemy recyklingowi te elementy DOM, aby wyświetlać nowe dane podczas przewijania ekranu.

Więcej informacji: Ionic Framework - Virtual Scroll

Answer 2

Przewijanie wydajność jest powszechnym problemem w większości ram javascript.

Jest to spowodowane zdarzeniami dotyku i koła. Ale możesz przekazać {passive: true} do detektora zdarzeń, aby włączyć niektóre optymalizacje. Robiąc to z góry, mówisz, że twój przewodnik nigdy nie użyje preventDefault(), aby wyłączyć przewijanie.

addEventListener(document, "touchstart", function(e) { 

},{passive: true}); 

Nie jest jeszcze zaimplementowany we wszystkich przeglądarkach, ale mam nadzieję, że kiedy to nastąpi, wszystkie główne js frameworks zastosują tę technikę.