AngularJS vraiment lent à rendre avec environ 2000 éléments?
voici le violon: http://jsfiddle.net/D5h7H/7 /
il rend le suivant:
<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>
c'est une liste de filtres qui est chargée dans json à partir du serveur puis rendue à l'utilisateur (dans un exemple JSON est généré directement dans Fiddle). A l'heure actuelle, il y a 6 groupes de 30 filtres dans chacun avec 15 éléments d'option pour chaque filtre.
dans Firefox il faut maintenant environ 2 secondes pour le rafraîchissement de l'INTERFACE utilisateur.
est-ce que cette fois ça va pour angular js? Y a-t-il quelque chose que je fais de mal qui a causé 2sec? le rendu (cause 2000 elements ne semble pas être un grand nombre pour moi, mais 2sec. is certainly big)?
8 réponses
en AngularJS 1.3+, il y a One-time binding intégré:
Le but principal d'expression de liaison est de fournir un moyen de créer une liaison qui obtient radiées et libère des ressources une fois la liaison est stabilisé. Réduire le nombre d'expressions la boucle de digestion est plus rapide et permet d'obtenir plus d'informations affichés en même temps.
In pour rendre la liaison unique, ajouter :: à la valeur de liaison:
<div>{{::name}}</div>
Voir aussi les discussions pertinentes:
vous devriez regarder bindonce si vous n'avez pas besoin de mettre à jour L'UI après que les données ont été liées à elle. bindonce peut aussi attendre qu'un objet ait été chargé et ensuite faire la reliure. Il vous fera gagner un tas de temps et de réduire votre $watch() es de façon spectaculaire lorsqu'il est utilisé à droite.
c'est dû à la façon dont AngularJS vérifie les comptes. Voici une réponse définitive pour un rendu lent avec AngularJS.
utilisant ce projet: angular-vs-repeat augmentera votre performance.
avec cela, le navigateur va rendre (donc angular va faire sa vérification sale) à seulement tant d'éléments qui s'inscrivent dans le conteneur scrollable où vous rendez les éléments. Démo ici
je me rends compte que c'est une vieille question mais je ne pense pas qu'une réponse ait été postée encore.
je crois que la raison pour laquelle votre forme est lente n'est pas seulement que vous avez plus de 2000 éléments mais que ces éléments sont des éléments de forme en utilisant ng-model . La validation de la forme intégrée en angle est très puissante et pratique, mais peut se comporter très lentement, surtout lorsque vous chargez la forme pour la première fois. Si ces 180 (6x30) éléments d'entrée ont utilisé quelque chose comme ng-checked au lieu de ng-model , en évitant le mécanisme de validation du formulaire, alors vous devez charger beaucoup plus rapidement.
<input type="checkbox" ng-checked="filter.enabled">{{filter.Name}}
réduire les observateurs avec une liaison unique via :: aidera également la situation, mais je pense que votre principal problème est avec ng-model et la validation de forme angulaire.
avec environ 2000 articles à charger, vous n'avez pas besoin de les rendre tous en même temps. Vous pouvez les rendre agressivement lorsque la page défile, ou changer la page. Se référer à cette question
utilisez un identifiant unique tel que filter id pour minimiser le temps de création de tous les dom par ng-repeat. Reportez-vous à suivi-et-doublons
comme la réponse d'alecxe au-dessus de , utilisez limite unique, si ce n'est pas propre pour vous, vous pouvez ralentir la fréquence de digestion avec un tel ng-model-options="{ debounce: 200 } angular options
et enfin, vous devez utiliser certains outils d'analyse de performance pour suivre le goulot d'étranglement de l'application, et de les corriger.
Espérons que cette aide.
ng-repeat="filter in group.Filters | track by:filter.id | limitTo: NumPerOperation"
en utilisant ces deux modules angulaires, vous pouvez rendre la rendérisation de vos tables beaucoup plus rapide.
" quick-ng-repeat" https://github.com/allaud/quick-ng-repeat
" infinite-scroll" https://github.com/infinite-scroll/infinite-scroll
Juste être conscient que ce n'est pas une solution pour améliorer les performances de votre "ng-repeat", c'est juste une approche différente pour faire de votre les tables de plus en plus vite.
remplacer ng-repeat="group in Model.Groups" par collection-repeat="group in Model.Groups" .