Quelques conseils d'optimisation pour angulairejs_AngularJS

Il existe déjà de nombreuses façons d'optimiser ng sur Internet. Le noyau part des propriétés internes du scope $$watchers. Aujourd'hui, je vais parler d'autre chose. L'essence reste la même, car c'est une partie difficile. ng. Blessures, mais je crois que tant que nous utilisons des techniques appropriées, ces problèmes peuvent encore être évités

.

ng Introduction

angularjs, appelé ng, est le framework mvvm produit par Google. Il améliore l'efficacité du développement des projets front-end (en pratique, il peut en effet améliorer l'efficacité du développement. Il entoure l'ensemble du projet de contrôleurs, d'instructions, etc.). et services, et utilise une DI interne unique pour résoudre le problème d'appel avant la troisième couche. Pour plus de détails, veuillez vous référer à l'analyse du code source ng que j'ai écrite précédemment

.

Les défauts de ng

En ce qui concerne les failles, parlons d’abord de son principe simple de liaison de données

Chaque modèle défini sur chaque page dans ng ajoutera en fait un écouteur dans la portée actuelle. Le conteneur interne est le tableau $$wachers. Tant qu'un modèle sur la page change, la méthode $digest à l'intérieur de la portée sera. déclenché. , il recherchera tous les modèles dans l'arborescence de portée actuelle afin de garantir que les modèles sur la page peuvent obtenir la synchronisation des données, cela prend donc beaucoup de temps. La déclaration officielle est que lorsque 2000 auditeurs apparaissent sur la page, le les performances des pages diminueront considérablement. Donc, pour améliorer les performances de ng, il faut partir de cet aspect.

astuce 1 : lier une fois

En fait, d'autres l'ont déjà dit en ligne. Permettez-moi de parler de la nouvelle utilisation ici. La version 1.3.0 de ng a intégré une syntaxe pour prendre en charge la situation où le modèle n'est lié qu'une seule fois. :
ancien code

Copier le code Le code est le suivant :

bonjour

nouveau code

Copier le code Le code est le suivant :

bonjour

Vous pouvez voir que la nouvelle syntaxe consiste à ajouter :: devant le modèle. Je pense que cette syntaxe est beaucoup plus pratique que les plug-ins tiers utilisés en ligne.

Copier le code Le code est le suivant :

astuce 2 : $scope.$digest vs $scope.$apply

Je pense que beaucoup de gens connaissent la méthode $apply. Elle est généralement utilisée lorsque le code n'est pas exécuté dans l'environnement ng. Afin de garantir la synchronisation des données de la page, l'appel de la méthode $apply une fois l'exécution du code terminée. déclenchez le $digest interne pour vérifier l'effet. Tous les modèles du domaine sont en fait appelés ainsi en interne. Seuls quelques extraits de code sont écrits ci-dessous.

Copier le code Le code est le suivant :

...
...
$rootScope.$digest
...
...

Tout ce qu'il fait, c'est appeler $digest sous la portée racine de $rootScope. Alors, quelles sont les différences entre $digest sous différentes portées ? En fait, la différence la plus importante est
.

Copier le code Le code est le suivant :

$digest recherche uniquement en profondeur tous les modèles sous l'appelant

Par conséquent, $scope permet de gagner beaucoup de temps dans la recherche de modèles par rapport à $rootScope.

Cependant, si vous souhaitez assurer la synchronisation de toutes les données du modèle sur la page, vous devez toujours appeler $rootScope, donc avant d'écrire du code, il est préférable de réfléchir aux données qui doivent être modifiées de manière synchrone.

astuce3 : Appelez ng-repeat le moins possible

ng-repeat créera de nombreux auditeurs par défaut, donc lorsque la quantité de données est importante, cela consomme des performances de page uniquement lorsque vous devez mettre à jour fréquemment la liste de données, sinon. C'est également un gaspillage d'y mettre autant d'auditeurs. À l'heure actuelle, vous pouvez utiliser le service $interpolate fourni avec ng pour analyser un fragment de code, qui est similaire à un moteur de modèle statique. Son interne repose principalement sur le noyau ng. service d'analyse $parse, puis ceux-ci L'extrait de code après avoir rempli les données peut être directement attribué à un modèle unique

.

astuce4 : Essayez d'écrire une syntaxe native dans la commande

Bien que ng fournisse de nombreuses instructions telles que ng-show et ng-hide, leur fonction est d'afficher ou de masquer un fragment de code selon le vrai ou le faux du modèle. Bien qu'il puisse rapidement réaliser les exigences commerciales, ces instructions. sont toujours Un écouteur sera ajouté par défaut. Si ces extraits de code existent dans une instruction volumineuse, une meilleure façon est d'écrire .show(), .hide() et d'autres méthodes jq similaires dans le lien d'instruction pour le contrôler de cette façon. Enregistrez le nombre d'auditeurs. Semblables aux instructions d'événement intégrées, celles-ci peuvent en fait être liées aux événements en utilisant addEventListener dans les instructions périphériques. Quoi qu'il en soit, avant d'écrire du code, il est préférable de réfléchir à la manière d'augmenter le nombre d'auditeurs. au moins, cela peut améliorer considérablement les performances de la page.

Astuce5 : Utilisez le moins de filtres possible sur la page

Lors de l'ajout d'un filtre après le modèle dans la page, le modèle actuel sera exécuté deux fois dans $digest, ce qui entraînera une perte de performances inutile. La première fois se produit lorsque $$watchers détecte des changements de tâche ; Lorsque vous modifiez les valeurs du modèle, essayez d'utiliser le moins possible la syntaxe du filtre en ligne, car ce qui suit affectera grandement les performances de la page

Il est recommandé d'utiliser le service $filter pour appeler une fonction de filtre en arrière-plan, ce qui peut améliorer considérablement les performances de la page. Le code est le suivant
.

Copier le code Le code est le suivant :

$filter('filter')(tableau, expression, comparateur);

Résumé

Ce qui précède sont quelques conseils pour améliorer les performances du projet ng. Bien que ng soit très puissant, le code non standard détruira également ses performances, donc avant d'écrire le code, il est préférable de réfléchir aux endroits où l'écouteur n'est pas nécessaire. .