javascript - software - AngularJS: repetición virtual con fila con diferentes alturas

instalar angularjs

Question

Estoy construyendo una aplicación híbrida usando iónico y AngularJS (material AngularJS). Esta aplicación también tiene un chat integrado construido con Node.js y socket.io.

Ahora tengo el problema de que con solo 200 mensajes la aplicación tarda mucho en cargar todos los mensajes (200 ms en el navegador -> 4 segundos en la aplicación, incluso con CrossWalk, y con seguimiento por mensaje.id) y también escribiendo en el área de texto para insertar el mensaje se ralentiza.

Tengo dos soluciones para resolver esto:

1. Repetición virtual (md-virtual-repeat)
2. Desplazamiento infinito (ion-infinite-scroll)

1) Creo que la repetición virtual sería la mejor solución (ya lo he implementado en otra página y desplaza 1500 elementos como un amuleto) pero el problema es que los mensajes pueden tener diferentes alturas según sus longitudes y md-virtual- Los requisitos de repetición son que todos los elementos deben tener la misma altura para trabajar.

2) Entonces quizás podamos pivotar al método Infinite Scroll, pero el problema ahora es que hacerlo con la directiva ion-infinite-scroll se vuelve un poco complicado ya que un chat necesita activar el loadMore () cuando llega a la parte superior y no a la parte inferior .

Así que mi pregunta es: ¿Alguien tiene una solución alternativa para tener una repetición ng suave / rápida dentro de un chat usando o una directiva de repetición virtual que puede manejar diferentes alturas o un desplazamiento infinito que funciona en la parte superior ?

Answer 1

¿Has echado un vistazo a React.js como una solución? Utiliza un DOM virtual que hace que la actualización de listas largas sea más eficiente.

Hay un repositorio de código abierto en GitHub que mezcla Angular y React, llamado ngReact.

descripción general: http://ngreact.github.io/ngReact/

documentos: http://ngreact.github.io/ngReact/docs/ngReact.html

repo: https://github.com/ngReact/ngReact

Espero que esto ayude.

Answer 2

Creo que la collection-repeat directivas iónicas puede ser lo que estás buscando.

collection-repeat permite que una aplicación muestre enormes listas de elementos mucho más performantemente que ng-repeat. Presenta en el DOM solo tantos elementos como actualmente visibles. Esto significa que en una pantalla de teléfono que puede caber ocho elementos, solo se mostrarán los ocho elementos que coincidan con la posición de desplazamiento actual.

Answer 3

El uso de aglutinantes separados como remaches podría ser una buena solución, es fácil de integrar y tiene rv, cada uno para bucles

Answer 4

Mire angular-vs-repeat angular-vs-repeat

Demo: demo

Utilizo la longitud de la línea para calcular la altura de los artículos.

Es un método muy aproximado. En nuestra aplicación, sabemos que un personaje inglés con tamaño de letra 15px tendrá un ancho de aproximadamente 6.7px (está bien, si usa una fuente monoespacial, pero no es nuestro caso). También sabemos siempre el ancho de cada segmento y la altura de una línea de texto. itemHeight = commulativeTextLenght / lineWidth + paddingsOfItem; También el estilo de línea puede afectar su cálculo. En general, tuvimos un método no malo para calcular alturas de aproximadamente 8000 párrafos de texto.

Answer 5

Un par de cosas que podrías tratar de acelerar.

Uno sería usar algo como quick-ng-repeat: https://github.com/allaud/quick-ng-repeat lugar de construir en angular js ng-repeat

Otra sería utilizar one time binding siempre que sea posible para evitar que angular busque constantemente cambios durante cada ciclo de resumen: https://docs.angularjs.org/guide/expression#one-time-binding

Y, por supuesto, si es posible, intente utilizar la opción de perfil de la herramienta de desarrollador de chrome para averiguar cuál de las funciones está desacelerando la aplicación; )

PD: podría valer la pena revisar este hilo para ver cómo se podría implementar el desplazamiento infinito inverso: Implementar un desplazamiento infinito inverso usando la directiva ngInfiniteScroll en AngularJS

Answer 6

Las listas de desplazamiento eficaces como md-virtual-repeat o collection-repeat necesitan conocer la altura de cada elemento para poder trabajar. Esto se debe a que necesitan conocer la posición de desplazamiento, por ejemplo, para mostrar una barra de desplazamiento o para saltar marcos para movimientos rápidos de deslizamiento hacia abajo. La posición de desplazamiento solo se puede encontrar si sabe cuánto se ha desplazado (necesitamos la altura de los elementos anteriores) y cuánto queda para desplazarse (necesitamos la altura de los elementos a continuación).

Lo que puedes hacer es usar una fábrica para calcular la altura de cada elemento antes de inyectarlos en el ciclo. Esto se puede hacer creando un contenedor con las mismas propiedades que el contenedor de destino (por ejemplo, clases CSS), añadiendo los elementos recién cargados, calculando su altura (usando element.offsetHeight ) y eliminando el contenedor después.

Tenga en cuenta que esto es bastante pesado y es probable que cause un pequeño pico de retraso.