Angular JS Scaling & Performance

Question

Nous sommes en battant la tête contre les problèmes de performances avec un Angulaire de l'application que nous développons pour une banque.

Malheureusement, c'est une rupture de contrat à montrer des extraits de code. Peu importe, je peux décrire certaines des principales questions en cours, et je suis en espérant que les meilleures pratiques peuvent être recommandés.

Les Applications De Structure:

• Essentiellement, un géant multi-page de formulaire.
• Chaque formulaire est son propre partielle, avec imbriqués les contrôleurs et les partiels sur 3 niveaux de profondeur.
• Les mêmes formes sont ng répétée sur une collection d'objets json.
• Chaque formulaire est lié à l'objet / modèle qu'il est répété plusieurs fois.
• Nous sommes censés soutenir n'importe où à partir de 1-200 formes sur la page.

Si vous jetez un oeil à la timeline. Nous passons beaucoup de temps dans le jQuery analyser méthode html, jQuery recalculer l'étable, la méthode GC Événement (Garbage Collection). J'imagine que la minimisation de ces devraient accélérer un peu les choses. Ils sont tous une partie de l'écart Angulaire du cycle de vie, mais il peut y avoir de meilleures façons de les éviter. Voici quelques captures d'écran du générateur de profils:

En fin de compte, l'application est lente à mesure que le nombre de formes répétées passe au-dessus de 5. Chaque forme est relativement indépendante pour les autres. Nous avons essayé de ne pas regarder toutes les propriétés partagées entre les formes.

Answer 1

Vous avez besoin de créer des directives sur mesure afin de limiter les problèmes de performances angulaire. Contrairement à la braise angulaire est livré avec tous les cloches et de sifflets allumé et c'est à vous de tonalité vers le bas. Voici quelques directives que j'ai créé pour vous aider. Pas toutes les données dans votre application doit être bidirectionnel de données liées et, par conséquent, vous pouvez économiser de la puissance du cpu en renonçant à regarder les expressions de la page en cas de besoin. L'ensemble de ces directives lier les données une seule fois et de le laisser seul.

https://gist.github.com/btm1/6802599

https://gist.github.com/btm1/6802312

https://gist.github.com/btm1/6746150

L'une des réponses ci-dessus parle de ng-repeat avoir gain de performance énorme frappe je vous donne donc les "répéter" une seule fois au moment de la liaison de données répéter la directive :)

Answer 2

Il est difficile de fournir une solution sans plus d'informations à propos de votre problème, mais j'ai récemment vécu (et résolu) un problème de performance qui peut être semblable à ce que vous avez vu, et n'était pas liée à l' $digest cycle.

La plupart des discussions de angularjs la performance (y compris l' excellent post de Misko) est à propos de la performance de sale de la vérification et de l' $digest cycle. Mais ce n'est pas le seul problème de performances, vous pouvez rencontrer avec angularjs. La première étape devrait être de déterminer si l'empreinte du cycle est votre problème ou pas. Pour cela, vous pouvez utiliser batarang, ou tout simplement regarder votre application et à quand exactement, c'est lent. Lorsque le digérer cycle est lente, essentiellement l'interaction avec l'INTERFACE utilisateur sera lente.

Otoh, que, vous pouvez avoir une application avec une vitesse de digérer cycle, qui est lent que lors du chargement, changer de vue, ou en modifiant les ensembles de composants à afficher, et cela peut se manifester dans profilage beaucoup de temps passé dans l'analyse HTML de ramassage des ordures et la collecte. Dans mon cas, cela a été résolu en faisant un pré-calcul de l'html template d'affichage, au lieu de s'appuyer sur ng-repeat, ng-switch, ng-si partout.

J'ai été en utilisant un ng-repeat="widget widgets" contenant une ng-interrupteur sur le type de widget pour afficher un ensemble arbitraire de widgets (personnalisé autonome directives). Le remplacer par le code pour générer l'angle de modèle pour l'ensemble de widgets accéléré route de commutation à partir de ~10s pour pratiquement instantanée.

Vous pouvez voir les google groups fil ci-dessus pour un peu plus d'infos sur comment j'ai résolu mon problème en particulier, ou de fournir plus d'informations à propos de votre application si vous souhaitez des suggestions spécifiques.

Answer 3

Généralement, AngularJS sera de piètre qualité si il y a plus de 2000 data-liaisons active, c'est à dire 2000 articles dans le champ d'application qui sont en train d'être sale vérifié chaque $digest-cycle. Ng-repeat a un gros impact sur les performances à cause de cela; chaque élément répété met en place au moins deux liaisons, sans compter toutes les autres données ou des directives qui sont utilisés à l'intérieur de l'élément.

L'un des développeurs derrière AngularJS donne une excellente description des détails de sale-checking, et ses performances dans cette SORTE de réponse:

http://stackoverflow.com/a/9693933/179024

Le fil de commentaires ci-dessous la réponse est intéressant à lire, et j'ai également partager avec vous quelques réflexions à ce sujet dans la réponse plus bas sur la même page:

http://stackoverflow.com/a/18381836/179024

Answer 4

Je suis désolé de le mettre comme une "réponse" parce que je n'ai pas encore assez de points pour faire un commentaire.

Nous avons rencontré des problèmes similaires avec notre application AngularJS. En utilisant 'batarang', il semble avoir à gérer un grand nombre d'objets scope et leurs expressions $ watch pertinentes créent un problème de performances. Cela nous a amenés à nous demander si un autre cadre ou quelque chose comme ReactJS devrait être utilisé à la place pour prendre en charge la partie "vue".

Answer 5

essayez d'éviter les suivantes

1. veuillez éviter d'utiliser ng-repeat si vous avez plus de 50 éléments la liste à la fois et éviter le manuel de montres

2. n'utilisez pas de ng-click, ng-mouseenter,ng-mouseleave etc événements de la souris à l'aveuglette jusqu'à ce qu'il est un besoin urgent , essayez de réduire leur nombre en utilisant $objet événement ainsi que la propagation de l'évènement concepts de js

3. si possible, utilisez étendue.$digérer au lieu de portée.$de la montre, ce qui assure que les digérer cycle est exécuté uniquement sur l'enfant étendues

   4. essayer d'avoir des imbriquée étendues, un ou deux contrôleurs à l'intérieur d'un contrôleur de parent et de garder la réutilisables logique de parent , j'ai utilisé ce dans les états lors de l'utilisation de l'Interface utilisateur du routeur (pour répondre à une req où le changement de l'URL a été nécessaire sans rafraîchir la page ).

   le plus important! RETIRER TOUS LES FILTRES DE HTML!

tous les ci-dessus déclencher un recueil de cycle sur tous les champs de votre application, de manière à il ya une forte probabilité que, même lorsque l'avis a été rendu angulaire est de nouveau l'exécution implacable digérer les boucles