Publié sur Google WebPerf (London WebPerf Group), 26 août 2014.
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 cette conférence, nous dé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)
La copie de code est la suivante:
var o = {x: 'y'};
supprimer le bœuf; // Pour le moment, O deviendra un objet lent
bœuf; //
var o = {x: 'y'};
o = null; // ça devrait être comme ça
2) 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.
La copie de code est la suivante:
var a = fonction () {
vargestr = nouveau tableau (1000000) .join ('x');
return function () {
retour plus grand;
}
} ();
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.
La copie de code est la suivante:
var select = document.QuerySelector;
var treeref = select ('# arbre');
// Dans le com arbre, 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é parce que Treeref est toujours là
//Solution:
treeref = null;
// L'arbre ne peut pas encore être recyclé, car les feuilles résultent que Leafref est toujours là
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:
La copie de code est la suivante:
pour (var i = 0; i <90000; i ++) {
var buggyObject = {
callagain: function () {
var ref = this;
var val = setTimeout (function () {
Réf.Callagain ();
}, 90000);
}
}
buggyObject.Callagain ();
// Bien que vous souhaitiez recycler, la minuterie est toujours là
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:
Pour plus de contenu, veuillez consulter le PPT d'origine.