javascript - cloak - AngularJS realmente lento en renderizar con aproximadamente 2000 elementos?

ng-init

Question

Aquí está el violín: http://jsfiddle.net/D5h7H/7/

Se traduce lo siguiente:

<div ng-repeat="group in Model.Groups">
<span>{{group.Name}}</span>
<div ng-repeat="filter in group.Filters">
<input type="checkbox" ng-model="filter.enabled">{{filter.Name}}
<select ng-disabled="!filter.enabled">
<option ng-repeat="value in filter.Values">{{value}}</option>
</select>
</div>
</div>

Es una lista de filtros que se carga en json desde el servidor y luego se procesa al usuario (en un ejemplo, json se genera allí mismo en Fiddle). En este momento hay 6 grupos de 30 filtros en cada uno con 15 elementos opcionales para cada filtro.

En Firefox, ahora se tarda unos 2 segundos en volver a dibujar la interfaz de usuario.

¿Está bien esta vez para js angular? ¿Hay algo que estoy haciendo mal que causó 2sec. representación (porque los 2000 elementos no me parecen un número grande, pero 2sec. es ciertamente grande)?

Answer 1

Con alrededor de 2000 elementos para cargar, no necesita renderizarlos todos a la vez. Puede representarlos agresivamente cuando la página se desplaza, o cambiar de página. Refiérase a esta question

Utilice una identificación única, como la identificación del filtro, para minimizar el tiempo de creación de ng de todos los dom. Consulte tracking-and-duplicates

Como la respuesta de alecxe anterior , use el límite de una sola vez, si eso no es adecuado para usted, puede reducir la frecuencia de resumen con tales ng-model-options="{ debounce: 200 } angulares ng-model-options="{ debounce: 200 }

Y por último, debe usar algunas herramientas de análisis de rendimiento para rastrear el cuello de botella de la aplicación y corregirlas.

Espero que esto ayude.

ng-repeat="filter in group.Filters | track by:filter.id | limitTo: NumPerOperation"

Answer 2

Con estos dos módulos angulares puede hacer que la renderización de sus tablas sea mucho más rápida.

"quick-ng-repeat" https://github.com/allaud/quick-ng-repeat

"infinite-scroll" https://github.com/infinite-scroll/infinite-scroll

Solo tenga en cuenta que esta no es una solución para mejorar el rendimiento de su "repetición ng", este es solo un enfoque diferente para hacer sus tablas más rápidas.

Answer 3

Debería consultar bindonce si no necesita actualizar la interfaz de usuario después de que los datos se hayan vinculado a ella. bindonce también puede esperar hasta que se haya cargado un objeto y luego hacer el enlace. Le ahorrará un montón de tiempo y reducirá dramáticamente su $watch() cuando se usa correctamente.

Answer 4

En AngularJS 1.3+, hay One-time binding integrado:

El propósito principal de la expresión de enlace de una sola vez es proporcionar una manera de crear un enlace que se elimine del registro y libere recursos una vez que el enlace se haya estabilizado. Reducir el número de expresiones que se observan hace que el bucle de resumen sea más rápido y permite que se muestre más información al mismo tiempo.

Para realizar el enlace de una sola vez, anteponga :: al valor de enlace:

<div>{{::name}}</div>

También vea las discusiones relevantes:

• Valor de render sin enlace de datos
• ¿Cómo funciona el enlace de datos en AngularJS?
• Detenga genuinamente que un elemento se enrede - desvincule un elemento - AngularJS

Answer 5

Eso es debido a cómo AngularJS realiza la comprobación sucia. Aquí hay una respuesta definitiva a la reproducción lenta con AngularJS.

Answer 6

Me doy cuenta de que esta es una pregunta antigua, pero no creo que se haya publicado una respuesta todavía.

Creo que la razón por la que su formulario es lento no es solo que tenga más de 2,000 elementos, sino que esos elementos son elementos de formulario que utilizan ng-model . La validación integrada de formularios en Angular es muy potente y conveniente, pero puede comportarse muy lentamente, especialmente cuando se carga el formulario por primera vez. Si esos 180 (6x30) elementos de entrada usaron algo como ng-checked lugar de ng-model , evitando el mecanismo de validación de formulario, entonces el formulario debería cargarse mucho más rápido.

<input type="checkbox" ng-checked="filter.enabled">{{filter.Name}}

Reducir a los observadores con el enlace de una sola vez a través de :: también ayudará a la situación, pero creo que su problema principal es con la validación de formas ng-model angulares.

Answer 7

Sustituya ng-repeat="group in Model.Groups" con collection-repeat="group in Model.Groups" .

Answer 8

Usando este proyecto: angular-vs-repeat aumentará tu rendimiento.

Con esto, el navegador renderizará (por lo tanto, angular hará su comprobación de suciedad) solo a tantos elementos que caben en el contenedor desplazable donde se renderizan los elementos. Demo here