ionic 2 scroll Leistungsprobleme

Question

ionic 2 scroll Leistungsprobleme

8

Sehr beeindruckt von Blogs und Rezensionen über ionic2 und Angular2, habe ich angefangen, eine Anwendung in ionic 2 zu schreiben, und festgestellt, dass die ionic2-Scroll-Leistung für eine große Anzahl von Datensätzen sowohl für iOS als auch für Android nicht gut ist.

Ich habe eine große Liste von Elementen mit dazwischenliegenden Bildern in den meisten Listenelementen
Die Scroll-Leistung ist gut für 10 bis 20 Elemente, aber sehr langsam, wenn es um 30+ Elemente
Nach vielen Suchen gefunden Virtual Scroll in ionischen und verwendet es dann Leistung leicht verbessert für bis zu 50 Elemente, aber wieder langsam nach 65+ Elemente

Ich habe versucht, WKWebview in iOS, einige Verbesserungen in der Leistung, aber oft Bildschirm wird für große Listen schwarz, so dass ich diese Idee fallen lassen. Ich möchte den Zebrastreifen wegen seiner Größe nicht mehr verwenden, also nie ausprobiert.

Kann jemand helfen, eine Problemumgehung vorzuschlagen, um dieses Problem oder eine reine Javascript-Framework-Lösung zu lösen, um große Listen ohne Probleme anzuzeigen? für Android und iOS.

javascript android ios performance ionic2

Kiran 21.12.2016, 04:45

quelle

2 Antworten

Tags und Links javascript android ios performance ionic2

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Die auf Anmerkungen basierende Sicherheitseinschränkung funktioniert nicht für vom Web-Socket ausgelöste Methodenaufrufe

score 0 · Answer 1

Scrollen ist eine der häufigsten Interaktionen mit einer mobilen Anwendung und es ist äußerst wichtig, dass es sich richtig anfühlt. Native Anwendungen haben Listen, die reibungslos ablaufen, sie reagieren auf Berührung und Richtungsänderungen, sie beschleunigen und verzögern auf natürliche Weise.

Versuchen Sie Virtual Scroll of Ionic2

zu verwenden

Virtual Scrolling behebt dieses Problem. In Ionic 1 wurde dies Collection Repeat genannt, in Ionic 2 heißt es Virtual Scroll, aber es ist ein Konzept, das in der mobilen HTML5-Entwicklung weit verbreitet ist. Die Grundidee besteht darin, dass wir nur so viele Elemente im DOM erstellen, dass die aktuell angezeigten Listendaten angezeigt werden, und dass diese DOM-Elemente wiederverwendet werden, um neue Daten anzuzeigen, während sie vom Bildschirm scrollen.

Weitere Informationen: Ionic Framework - Virtual Scroll

score 0 · Answer 2

Scrolling-Leistung ist ein häufiges Problem in den meisten JavaScript-Frameworks.

Dies liegt an Touch- und Wheel-Events. Sie können jedoch {passiv: true} an den Ereignis-Listener übergeben, um einige Optimierungen zu ermöglichen. Wenn Sie das tun, sagen Sie, dass Ihr Handler preventDefault () niemals zum Scrollen verwenden wird.

%Vor%

Es ist noch nicht in allen Browsern implementiert, aber hoffentlich, wenn es so sein wird, werden alle großen js-Frameworks diese Technik übernehmen.