Causes et solutions aux fuites de mémoire IE8 (la mémoire ne cesse de croître)_compétences javascript

Lors du développement récent, j'ai utilisé des mises à jour partielles programmées sur la page. Du coup, tout était normal sous IE6, 7 et Firefox. Cependant, après quelques heures sous IE8, le navigateur a planté, indiquant un débordement de mémoire. Je pensais qu'il s'agissait d'une fuite de mémoire causée par un code mal écrit, mais IE6 et 7 étaient normaux. Après quelques recherches, il s'est avéré qu'il s'agissait d'un bug dans IE8.

Problème

Dans IE8, la mémoire occupée par la génération de nœuds Dom spécifiques ne sera pas libérée, même si ces nœuds sont supprimés, la mémoire ne sera pas libérée.

Les types de nœuds de fuites de mémoire incluent : formulaire, bouton, entrée, sélection, zone de texte, a, img et objec

La plupart des autres types de nœuds ne seront pas divulgués, tels que span, div, p, table, etc.

Ce problème ne se produit que dans IE8 et ne se produit pas dans les autres navigateurs.

Si l'utilisateur appuie sur F5, IE8 actualisera la page. Tout d'abord, il déchargera window.top, ce qui libérera la mémoire. Si la page est une iframe, déchargez cette iframe et rien ne se passera. Il semble que la mémoire ne sera libérée que lorsque window.top sera déchargé.

Exemple

Exemple 1

Exécutez le code suivant, IE8 perdra de la mémoire.

function leak1() { 
var node = document.getElementById("TO_AREA"); 
node.innerHTML = "<img />"; 
node.innerHTML = ""; 
node = null; 
} 

Remarque :

* Cet exemple ajoute des nœuds, donc il y aura une fuite.

* Il y a un div avec l'identifiant "TO_AREA".

* Juste pour rappel, il n'y a pas de fermetures ni de références circulaires ici.

Exemple 2

Le code suivant n'utilise pas innerHTML, mais il fuira quand même

function leak2() { 
var node = document.getElementById("FROM_AREA").cloneNode(true); 
node.id = "NEW_AREA"; 
document.body.appendChild(node); 
document.body.removeChild(node); 
node = null; 
}

Remarque :

* FROM_AREA est l'identifiant du formulaire, et il n'y a pas de fermetures ou de références circulaires ici.

Exemple 3

Voici l'exemple le plus simple et le plus direct :

function leak4() { 
var node = document.createElement("IMG"); 
document.body.appendChild(node); 
document.body.removeChild(node); 
}

Remarque :

* Si span est utilisé à la place de img, il n'y aura pas de fuite.

Ces exemples ne fuient que de la mémoire dans IE8. Je les ai testés sur IE8 sous Windows XP, Windows Vista, Windows Server 2008, Windows Server 2008 R2 et Windows 7, et j'ai utilisé le mode et les normes de compatibilité IE7 dans IE8. chaque cas.

Page de test

À propos des fuites

La taille de la mémoire augmente avec le temps, mais cela ne provoque pas directement le crash du navigateur. Il semble y avoir une limite supérieure à la mémoire utilisée par le navigateur. Cela semble limiter la mémoire utilisée par DHTML via certains moyens internes.

Une fois que la mémoire atteint la limite supérieure, le navigateur la gérera automatiquement, par exemple en faisant apparaître une boîte de dialogue indiquant une mémoire insuffisante.

Après mes propres tests, j'ai découvert qu'IFrame avait également ce problème (sous IE8)

Supplément : libération de mémoire iframe

La réponse de Jack, développeur principal externe, est que TabPanelItem n'effectuera pas de traitement spécial pour les éléments personnalisés pour l'onglet lorsqu'il est fermé. Cette partie du travail doit être effectuée en dehors du contrôle. D'un autre côté, des informations pertinentes indiquent qu'IE a un bug dans le recyclage des éléments iframe. Dans des circonstances normales, la valeur de l'attribut src de l'élément doit être modifiée en "abort:blank" et supprimée manuellement de l'arborescence DOM. En définissant la variable qui la référence dans le script sur vide et en appelant CollectGarbage(), vous pouvez éviter les fuites de mémoire causées par le recyclage incorrect de l'iframe.

<script>
function clearRAM() {
var frame = document.getElementById("ifr_content");
frame.src = 'about:blank';
frame.contentWindow.document.write( '');//清空frame的内容
frame.contentWindow.document.clear();
frame.contentWindow.close(); //避免frame内存泄漏
if (navigator.userAgent.indexOf('MSIE') >= 0) {
if (CollectGarbage) {
CollectGarbage(); //IE 特有 释放内存
//删除原有标记
var tags = document.getElementById("ifrSet");
tags.removeChild(frame);
//添加frameset框架
var _frame = document.createElement('frame');
_frame.src = '';
_frame.name = 'content';
_frame.id = 'ifr_content';
tags.appendChild(_frame);
}
}
}
//主动释放 5秒一次
setInterval( function() {
if (navigator.userAgent.indexOf('MSIE') >= 0) {
if (CollectGarbage) {
//alert(1)
CollectGarbage(); //IE 特有 释放内存
}
}
}, 5000) 
</ script>