web-dev-qa-db-fra.com

Iframes et gestion de la mémoire en Javascript

J'ai des liens qui chargent des pages dans des iframes. Je surveillais l'accumulation de données en mémoire à l'aide du profileur de mémoire de Google Chrome et j'ai remarqué certaines fuites en mémoire.

J'ai chargé la page et pris le premier instantané qui s'est ajouté à 2.69 MB. J'ai cliqué sur le lien qui ouvre une page dans une iframe et pris un autre instantané me donnant 14.58 MB au total. J'ai supprimé l'iframe à l'aide de l'extrait de code jQuery suivant:

$('#myframe').unbind();
$('#myframe').remove();
/*
* By the way, I also tried $('#myframe > *') as a selector. 
* It still didn't work. Even if it would, it doesn't look like a viable solution to me.
* It looks too resource intensive.
*
* I forgot to mention that I am not using Ajax to load my pages
*/

J'ai pris un autre instantané et ai obtenu 5.28 MB qui indique un écart de 2.59 MB par rapport à la valeur initiale, ce qui, selon ma compréhension, indique un fuites de mémoire.

Ma question est la suivante: si je supprime un iframe (qui inclut le document chargé dans celui-ci), le récupérateur de mémoire ne juge-t-il pas nécessaire de supprimer également de la mémoire tous les objets contenus dans ce document? Ou devrais-je le faire manuellement?

Je pensais que si je chargeais un document dans une iframe, sa taille n'affecterait pas l'utilisation de la mémoire sur la page parente. Je pensais que cela serait considéré comme une fenêtre séparée, mais évidemment ce n’était pas une hypothèse bien informée de ma part.

Des suggestions sur la façon de résoudre ce problème?

Je vous remercie.

javascriptjquerymemory-managementiframe
25
Sthe

Dans l'iframe, déclenchez un rechargement avant de le supprimer, puis supprimez-le.

<a href="#">Remove</a>
<iframe src="url" />​

$('a').click(function(){
    $('iframe')[0].contentWindow.location.reload();
    setTimeout(function(){
       $('iframe').remove();
    }, 1000);
});​

DEMO ici .

De plus, vous pouvez également effectuer un nettoyage manuel - c’est-à-dire si vous avez des données dans vos cookies ou HTML5 localStorage.

window.onbeforeunload = function(){
    $(document).unbind().die();    //remove listeners on document
    $(document).find('*').unbind().die(); //remove listeners on all nodes
    //clean up cookies
    /remove items from localStorage
}
17
Robin Maben

Si des objets de l'iframe sont référencés dans un objet de la fenêtre principale, cet objet ne sera pas supprimé du DOM, donc, si vous avez quelque chose comme ceci:

Fenêtre principale:

var object = {};
function iframe_call(data){
    object.iframe_data = data.something
}

iframe:

function onClick(){
    parent_object.iframe_call(this);
}

cela se produit surtout si vous faites référence à des objets DOM.

2
cuzzea
var frame = document.getElementById("myframe");
frame.src = "about:blank";

Cela a fonctionné de moi et a empêché des fuites de mémoire. Si vous devez détruire le parent de l’iframe, faites-le avec un certain retard pour éviter les fuites de mémoire.

0
Antonis