Que savez-vous de l’optimisation des performances d’AngularJS ? Voici le processus détaillé d'optimisation des performances d'Angularjs

Je le sais angularjs depuis un moment, mais je n'ai pas beaucoup réfléchi aux problèmes de performances. La dernière fois que j'étudiais les filtres, des problèmes de performances étaient impliqués. J'ai donc également résumé les optimisations de performances couramment utilisées. Jetons un coup d'œil ci-dessous

1. Optimisez $watch

1. Supprimez les montres inutiles à temps

var unWatch = $scope.$watch('', function() {
    // do something
    ...
    if (someCondition) {
        unWatch();    // 取消监听
    }
});

2. Essayez d'éviter les montres profondes

Nous savons tous que

a trois paramètres, et le troisième paramètre est $watch pour une surveillance approfondie. Ce paramètre est principalement utilisé lors de l'imbrication d'objets, mais essayez d'éviter de l'utiliser. Si vous souhaitez simplement voir les modifications des propriétés de base, n'utilisez pas le troisième paramètre pour une surveillance approfondie. Cela ralentira considérablement chaque processus. Le temps d’une séance d’écoute. true

3.ng-if et ng-show

Essayez d'utiliser

, car le premier supprimera non seulement ng-if, mais aussi le DOM correspondant. watch

et

sont simplement cachés, mais réellement chargés. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois ng-showcolonne Angularjs Learning Manual pour apprendre)

2. $apply et $digest

seront make $apply Entrez angular, puis commencez à parcourir à partir de $digest循环 pour vérifier les modifications. $rootScope

vérifiera uniquement le $digest actuel et son scope. 子scope

Donc, mais nous sommes sûrs qu'une opération n'affectera que le

actuel, et l'utilisation de scope améliorera légèrement les performances. $digest

3. Optimiser ng-repeat

utilise vraiment beaucoup d'instructions, mais il semble que ng-repeat soit souvent ignoré. track by

Notre

écrit souvent comme ceci : ng-repeat

ng-repeat="item in items"

Mais s'il est écrit comme ceci, lorsque nous actualisons la page, il supprimera tout le DOM existant puis le recréera et. rendu. Mais si nous ajoutons

ce sera différent : track by

ng-repeat="item in item track by item.id"

De cette façon, Angular

le DOM existant puis mettra à jour les parties modifiées. Cela réduit le rendu inutile. 复用

4. D'autres optimisations

• prennent beaucoup de temps et doivent être effectuées lors de la publication. console.log

• Utilisez le filtre avec prudence, il peut être prétraité dans

  . controller

• Essayez d'éviter d'utiliser des événements de diffusion. Vous pouvez utiliser la liaison ou le partage de données bidirectionnel

  à la place. service

5. Résumé sur angulairejs

Ce que j'ai résumé n'est pas exhaustif, c'est juste ce que j'utilise couramment. Avec plus d’utilisation, la compréhension s’approfondira davantage. (Enfin, je vous conseille la rubrique

angularjs Reference Manual du site PHP chinois, où vous trouverez le contenu angulaire js que vous souhaitez apprendre)

[Recommandation de l'éditeur]

expression angulaire JS Comment utiliser la formule ? Exemples d'utilisation d'expressions dans Angularjs

Quelles sont les différences entre Angularjs et jQuery ? Résultats de la comparaison d'angularjs avec jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!