Problemas de performance de desplazamiento iónico 2

Muy impresionado con los blogs y las críticas sobre ionic2 y Angular2, empecé a escribir una aplicación en ionic 2, y encontré que el performance de desplazamiento ionic2 no es bueno para gran cantidad de loggings tanto para iOS como para Android.

  1. Tengo una gran list de elementos con imágenes intermedias en la mayoría de los elementos de la list.
  2. El performance del desplazamiento es bueno para 10 a 20 elementos, pero es muy lento cuando se trata de más de 30 elementos
  3. Después de muchas búsquedas, se encontró que el desplazamiento virtual era iónico y lo usó, luego el performance mejoró ligeramente para un máximo de 50 elementos, pero nuevamente se volvió lento después de más de 65 elementos

Probé WKWebview en iOS, tengo algunas mejoras en el performance, pero a menudo la pantalla cambia a negro para lists grandes, así que abandono esta idea. No quiero usar crosswalk debido a su aumento de tamaño de la aplicación, por lo que nunca lo intenté.

¿Alguien puede ayudar a sugerir alguna solución para solucionar este problema o cualquier solución de código javascript puro para mostrar lists grandes sin problemas? para Android e ios.

El desplazamiento es una de las interacciones más comunes con una aplicación mobile, y es extremadamente importante que se sienta bien. Las aplicaciones nativas tienen lists que se desplazan suavemente, responden al tacto y cambian de dirección, aceleran y desaceleran de una manera que se siente natural.

Intenta usar Virtual Scroll of Ionic2

El desplazamiento virtual resuelve este problema. En Ionic 1 esto se llamó Collection Repeat, en Ionic 2 se llama Virtual Scroll, pero es un concepto que se usa ampliamente en el desarrollo mobile de HTML5. La idea básica es que solo creamos suficientes elementos en el DOM para mostrar los datos de la list que están actualmente en la pantalla y reciclamos esos elementos DOM para mostrar nuevos datos a medida que se desplazan fuera de la pantalla.

Más información: Marco iónico – Desplazamiento virtual

El performance de desplazamiento es un problema común en la mayoría de los frameworks javascript.

Esto se debe a los events táctiles y de rueda. Pero puede pasar {pasivo: verdadero} al detector de events para habilitar algunas optimizaciones. Al hacer esto de antemano, dice que su manejador nunca utilizará preventDefault () para deshabilitar el desplazamiento.

addEventListener(document, "touchstart", function(e) { },{passive: true}); 

Todavía no está implementado en todos los browseres, pero con suerte, cuando lo sea, todos los principales frameworks de js adoptarán esta técnica.