Plusieurs aspects qui provoquent facilement des fuites de mémoire JavaScript_javascript tips

Publié dans Google WebPerf (London WebPerf Group), 26 août 2014.

Les applications Web JavaScript efficaces doivent être fluides et rapides. Toute application qui interagit avec les utilisateurs doit réfléchir à la manière de garantir que la mémoire est utilisée efficacement, car si elle est trop consommée, la page plantera, obligeant l'utilisateur à recharger. Et tu ne peux que te cacher dans un coin et pleurer.

Le garbage collection automatique ne remplace pas une gestion efficace de la mémoire, en particulier dans les applications Web volumineuses et de longue durée. Dans cette conférence, nous montrerons comment gérer efficacement la mémoire via les DevTools de Chrome.

Et apprenez à résoudre les problèmes de performances tels que les fuites de mémoire, les pauses fréquentes du garbage collection et la surcharge globale de la mémoire, ce qui vous tue vraiment.

Addy Osmani a montré de nombreux exemples de fuites de mémoire dans Chrome V8 dans son PPT :

1) Supprimer les propriétés d'un Objet ralentira l'objet (consommant 15 fois plus de mémoire)

Copier le code Le code est le suivant :

var o = { x : 'y' };
delete o.x; //À ce moment, o deviendra un objet lent
o.x; //

var o = { x : 'y' };
o = null; //Ça devrait être comme ça

2) Fermeture

Lorsqu'une variable en dehors de la fermeture est introduite dans la fermeture, l'objet ne peut pas être récupéré (GC) à la fin de la fermeture.

Copier le code Le code est le suivant :

var a = fonction() {
var largeStr = new Array(1000000).join('x');
return function() {
Renvoie largeStr;
>
}();

3) Fuite du DOM

Lorsque le COM d'origine est supprimé, la référence du nœud enfant ne peut pas être recyclée à moins qu'elle ne soit supprimée.

Copier le code Le code est le suivant :

var select = document.querySelector;
var treeRef = select('#tree');

//Dans l'arborescence COM, leafRef est un nœud enfant de treeFre
var leafRef = select('#feuille');
var corps = select('corps');

body.removeChild(treeRef);

//#tree ne peut pas être recyclé car treeRef est toujours là
//Solution :
treeRef = null;

//L'arbre ne peut pas encore être recyclé car le résultat feuille leafRef est toujours là
leafRef = null;

//Maintenant, l'#arbre peut être libéré.

4) Fuite des minuteries

Les minuteries sont également un endroit courant où des fuites de mémoire se produisent :

Copier le code Le code est le suivant :

pour (var je = 0; je < 90000; je ) {
var buggyObject = {
​ callAgain : function() {
var ref = ceci;
var val = setTimeout(function() {
ref.callAgain();
}, 90000);
>
>

buggyObject.callAgain();
//Même si vous souhaitez recycler, la minuterie est toujours là
buggyObject = null;
>

5) Mémoire de débogage

L'outil de débogage de mémoire intégré à Chrome peut facilement vérifier l'utilisation de la mémoire et les fuites de mémoire :
Cliquez sur Enregistrer dans la chronologie -> Mémoire :

Pour plus d'informations, veuillez consulter le PPT original.