Cet article décrit les fuites de mémoire et les compétences de gestion de la mémoire de JavaScript, qui sont très pratiques. Partagez-le pour votre référence. Les méthodes spécifiques sont les suivantes:
Le contenu de cet article est de Google WebPerf (London WebPerf Group), 26 août 2014.
D'une manière générale, les applications Web JavaScript efficaces doivent être lisses et rapides. Toute application qui interagit avec les utilisateurs doit considérer comment s'assurer que la mémoire est utilisée efficacement, car si elle est trop consommée, la page se bloquera, forçant l'utilisateur à recharger. Et vous ne pouvez vous cacher que dans le coin et pleurer.
La collecte automatique des ordures ne remplace pas la gestion efficace de la mémoire, en particulier dans les grandes applications Web de longue durée. Dans cet article, nous montrerons comment gérer efficacement la mémoire via les Devtools de Chrome.
Et apprenez à résoudre des problèmes de performances tels que les fuites de mémoire, les pauses fréquentes de collecte des ordures et le ballonnement global de la mémoire, des choses qui vous coûtent vraiment l'énergie.
Addy Osmani montre de nombreux exemples dans son PPT qui provoqueront des fuites de mémoire dans Chrome V8:
1) Supprimer une propriété d'objet pour ralentir cet objet (consommer 15 fois plus de mémoire)
var o = {x: 'y'}; supprimer ox; // Pour le moment, O deviendra un bœuf d'objet lent; // var o = {x: 'y'}; o = null; // ça devrait être2) Clôture
Lors de l'introduction de variables à l'extérieur de la fermeture dans la fermeture, cet objet ne peut pas être collecté à la poubelle (GC) à la fin de la fermeture.
var a = function () {vargestr = nouveau tableau (1000000) .join ('x'); return function () {returngestr; }} ();3) Dom fuite
Lorsque le COM d'origine est supprimé, la référence de sous-nœud ne peut pas être recyclée si elle n'est pas supprimée.
var select = document.QuerySelector; var treeref = select ('# arbre'); // Dans l'arbre com, Leafref est un nœud enfant de Treefre var Leafref = select ('# leaf'); var body = select ('body'); body.removechild (Treeref); // # arbre ne peut pas être remboursé car Treeref est toujours là // Solution: Treeref = null; // L'arbre ne peut pas être remboursé car Leafref y est toujours Leafref = null; // maintenant #Tree peut être publié.4) Timeuses comptant (détermination) la fuite de la minuterie
Les minuteries sont également des endroits communs où les fuites de mémoire se produisent:
for (var i = 0; i <90000; i ++) {var buggyObject = {callagain: function () {var ref = this; var val = setTimeout (function () {ref.callagain ();}, 90000); }} buggyObject.Callagain (); // Bien que vous souhaitiez recycler, la minuterie est toujours buggyObject = null;}5) débogage de la mémoire
L'outil de débogage de la mémoire de Chrome peut facilement afficher l'utilisation de la mémoire et les fuites de mémoire:
Cliquez sur l'enregistrement dans Timeline -> Mémoire:
J'espère que cet article sera utile à l'apprentissage de la programmation JavaScript.