Comment réduire / supprimer les fuites de mémoire dans L'application angulaire
J'optimise mon grand Angular App. Comme j'ai trouvé un que Google DevTools est très bon pour détecter les problèmes. Comme je viens de commencer à apprendre à propos de DevTools, je suis très confus au sujet des fuites de mémoire.
Quand je reviens et que je passe de différentes pages de mon application, la taille de L'instantané du tas de profil augmente encore et encore, donc je pense qu'il y a un objet qui n'est pas nettoyé par GC et c'est pourquoi mon application devient lente après un certain temps, alors comment résoudre cela. S'il vous plaît aider.
Note
C'est ce que je comprends en utilisant DevTools, veuillez me corriger si je me trompe. D'autres suggestions sont les bienvenues.
Jusqu'à maintenant, ce que j'ai utilisé
- AngularOnce directive pour réduire la montre chaque fois que nécessaire.
- QuickList directive pour remplacer ng-repeat avec rapide-ng-repeat.
- InView Directive, pour gérer une grande liste donc je supprime DOM qui n'est pas dans fenêtre d'affichage.
- approche de chargement paresseux à partir de nginfinitescroll directive.
1 réponses
-
Supprimer les liaisons pour éviter les fuites de mémoire, Utilisez des étendues $destroy() Méthode.
Remarque:
Le coupable le plus probable de fuite de mémoire dans Angular est JQuery utilisé dans vos directives. Si vous attachez un écouteur d'événement dans votre directive en utilisant un plugin JQuery, ce dernier garderait une référence à votre DOM même après Angular supprime sa propre référence au DOM, ce qui signifie il ne serait jamais collecté par le navigateur, qui à son tour signifie "arbre DOM détaché " dans votre mémoire
Dans votre Directive, gardez la pratique pour délier l'événement jQuery. méthode $ destory qui peut être utilisée pour nettoyer les liaisons DOM avant l'élément est supprimé de la DOM.
$scope.$on("$destroy",function() { $( window ).off( "resize.Viewport" ); }); -
N'oubliez pas D'annuler les temporisations $ timeout dans vos événements $destroy AngularJS
$scope.$on("$destroy",function( event ) { $timeout.cancel( timer ); });