web-dev-qa-db-fra.com

AngularJS a vraiment ralenti le rendu avec environ 2000 éléments

Voici le violon: http://jsfiddle.net/D5h7H/7/

Il rend ce qui suit:

<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 restituée à l'utilisateur (dans un exemple, Json est généré directement dans Fiddle). Pour le moment, il y a 6 groupes de 30 filtres dans chacun avec 15 éléments optionnels pour chaque filtre.

Dans Firefox, il faut maintenant environ 2 secondes pour redessiner l'interface utilisateur.

Ce temps est-il ok pour les js angulaires? Y at-il quelque chose que je fais mal qui a causé 2sec. rendu (parce que 2000 éléments ne me semblent pas un grand nombre, mais 2 secondes est certainement grand)?

javascriptangularjsperformancepageloadng-bind
24
Shaddix

Dans AngularJS 1.3+, il y a One-time binding built-in:

Le but principal de l'expression de liaison ponctuelle est de fournir un moyen de créer une liaison qui est désenregistrée et libère des ressources une fois la reliure est stabilisée. Réduire le nombre d'expressions en cours Regardé rend la boucle de digestion plus rapide et permet à plus d’informations d’être affiché en même temps.

Afin de rendre la liaison ponctuelle, ajoutez :: à la valeur de la liaison:

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

Voir également les discussions pertinentes:

27
alecxe

Vous devriez regarder bindonce si vous n'avez pas besoin de mettre à jour l'interface utilisateur une fois les données liées. bindonce peut également attendre qu'un objet ait été chargé, puis faire la liaison. Cela vous fera gagner beaucoup de temps et réduira considérablement votre $watch()es lorsqu'il est utilisé correctement.

15
fidian

En utilisant ce projet: angular vs vs repeat va booster vos performances.

Avec cela, le navigateur restituera (donc angular fera son sale boulot) à autant d’éléments contenus dans le conteneur déroulant où vous rendez les éléments. Démo ici

4
kamilkp

Cela est dû à la façon dont AngularJS effectue les vérifications en cauchemar. Voici une réponse définitive pour ralentir le rendu avec AngularJS.

4
Stewie

Avec environ 2000 éléments à charger, vous n'avez pas besoin de les rendre tous en même temps. Vous pouvez les rendre de manière agressive lorsque la page défile ou changer de page. Reportez-vous à cette question

Utilisez un identifiant unique, tel qu'un identifiant de filtre, pour réduire le temps nécessaire à la création par ng-repeat de tout le dom. Reportez-vous à tracking-and-duplicates

Comme la réponse de alecxe ci-dessus , utilisez une délimitation ponctuelle. Si cela ne vous convient pas, vous pouvez ralentir la fréquence de résumé avec de tels paramètres ng-model-options="{ debounce: 200 } angular option

Enfin, vous devez utiliser certains outils d'analyse de performances pour suivre le goulot d'étranglement de l'application et les corriger.

J'espère que cela t'aides.

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

Je sais que c’est une vieille question, mais je ne pense pas qu’une réponse ait été postée pour le moment. 

Je crois que la raison de votre formulaire est lente, ce n'est pas seulement que vous avez plus de 2 000 éléments, mais que ces éléments sont des éléments de formulaire utilisant ng-model. La validation de formulaire intégrée dans Angular est très puissante et pratique, mais peut se comporter très lentement, en particulier lorsque vous chargez le formulaire pour la première fois. Si ces 180 éléments d'entrée (6x30) utilisaient quelque chose comme ng-checked au lieu de ng-model, en évitant le mécanisme de validation de formulaire, votre formulaire devrait se charger beaucoup plus rapidement.

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

Réduire le nombre d'observateurs avec une liaison ponctuelle via :: aidera également à résoudre le problème, mais je pense que votre problème principal concerne la validation de ng-model et de la forme angulaire.

1
Stephen Marsh

En utilisant ces deux modules angulaires, vous pouvez accélérer considérablement le rendu de vos tables.

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

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

Sachez simplement que ce n'est pas une solution pour améliorer les performances de votre "ng-repeat", c'est juste une approche différente pour rendre vos tables plus rapides.

0
Ventura