Comment faire pour supprimer des éléments du DOM sans fuite de mémoire?

Mon JavaSript code crée une liste de LI éléments. Quand je l'ai mise à jour de la liste, l'utilisation de la mémoire se développe et ne se couche jamais. Je l'ai testé dans le tamis et il montre que le navigateur conserve tous éléments qui ont été censés être supprimé par $.remove() ou $.empty jQuery commandes.

Que dois-je faire pour enlever les nœuds DOM sans la fuite de mémoire?

Voir mon autre question pour le code spécifique.

InformationsquelleAutor podeig | 2010-09-24

44

Les DOM conserve tous les nœuds DOM, même si elles ont été supprimées de l'arbre du DOM lui-même, la seule façon de supprimer ces nœuds est de faire un rafraichissement de la page (si vous mettez de la liste dans une iframe de l'actualisation ne sera pas aussi perceptible)

Sinon, vous pouvez attendre que le problème d'obtenir assez mauvais que les navigateurs garbage collector est forcé dans l'action (en parlant des centaines de mégaoctets de nœuds inutilisés ici)

La meilleure pratique est de réutiliser les nœuds.

EDIT: Essayez ceci:
```
var garbageBin;
window.onload = function ()
    {
    if (typeof(garbageBin) === 'undefined')
        {
        //Here we are creating a 'garbage bin' object to temporarily 
        //store elements that are to be discarded
        garbageBin = document.createElement('div');
        garbageBin.style.display = 'none'; //Make sure it is not displayed
        document.body.appendChild(garbageBin);
        }
    function discardElement(element)
        {
        //The way this works is due to the phenomenon whereby child nodes
        //of an object with it's innerHTML emptied are removed from memory

        //Move the element to the garbage bin element
        garbageBin.appendChild(element);
        //Empty the garbage bin
        garbageBin.innerHTML = "";
        }
    }
```
Pour l'utiliser dans votre contexte, vous serait-il faire comme ceci:
```
discardElement(this);
```
- Je ne savais pas à propos de "Le DOM conserve tous les nœuds DOM, même si elles ont été supprimées de l'arbre du DOM lui-même" voulez-vous dire $.remove() la fonction ne fait rien?
- Combien de MegaBite doit être utilisé pour exécuter un garbage collector. Je pense que 150 mo doit être suffisant. Mais il ne fonctionne pas pour moi.
- Édité, essayez le code fourni.
- Après des essais à tamis puis-je dire qu'il aide à enlever les ordures des nœuds. Mais quand je test dans IE8 et FF de toute façon l'utilisation de la mémoire augmente. Andrew, ce appendChild n'? Se déplace d'un nœud à la poubelle div? Dois-je exécuter $.unbind() avant discadElement()?
- Ne jeter à la poubelle doivent être ajoutés dans le corps du document?
- Cette réponse est confuse et ambiguë. Il est dit qu'une actualisation de la page est le "seul moyen" pour supprimer des nœuds, mais il implique également que le navigateur collecte des ordures va libérer les nœuds de mémoire. Si la valeur est true, alors l'actualisation n'est pas le "seul" moyen. En outre, du point de vue du développeur, il devrait y avoir aucune distinction entre les objets qui peuvent être des ordures collectées, et les objets qui ont été les ordures collectées-- c'est toute la question de la gestion automatique de la mémoire: lorsque le GC s'exécute doit être opaque pour l'utilisateur.
- Le DOM conserve tous les nœuds DOM" signifie que les navigateurs de la mise en œuvre de la DOM spec va stocker les références à ces nœuds à l'extérieur de l'arborescence du DOM, ou tout simplement que ces nœuds traîner dans la mémoire jusqu'à la prochaine fois que le garbage collector s'exécute? La réponse implique le dernier, mais ensuite ces nœuds ne sont pas "préservé" dans tout les sens du terme si elles sont capables d'être nettoyée.
- Salut Max, le problème est en fait juste mal aux navigateurs de ne pas le nettoyage de la croix-des références correctement, ce qui signifie que le garbage collector ne peut pas les ramasser. Cela peut avoir changé au cours des 5 dernières années.
InformationsquelleAutor Randy the Dev
13

C'est plus un FYI que d'une réelle réponse, mais il est également tout à fait intéressant.

Du W3C DOM de base spécification (http://www.w3.org/TR/DOM-Level-2-Core/core.html):

Le Noyau DOM Api sont conçus pour être compatibles avec un large éventail de langues, y compris à la fois générales de l'utilisateur, les langages de script et le plus difficile langues utilisé par la plupart des programmeurs professionnels. Ainsi, les DOM Api besoin pour fonctionner dans une variété de gestion de la mémoire de philosophies, de liaisons de langage qui n'exposez pas la gestion de la mémoire de l'utilisateur, par l'intermédiaire de ceux (notamment Java) qui explicite les constructeurs, mais de fournir automatiquement un mécanisme de collecte des déchets pour récupérer automatiquement la mémoire inutilisée, à ceux (surtout en C/C++) qui exigent généralement le programmeur explicitement allouer de la mémoire d'objet, de la piste où il est utilisé, et explicitement, gratuit pour les réutiliser. Pour assurer une API cohérente dans l'ensemble de ces plates-formes, les DOM ne traite pas des problèmes de gestion mémoire, mais à la place des feuilles de ces pour la mise en œuvre. Ni l'un ni l'explicite liaisons de langage défini par l'API DOM (ECMAScript et Java) exiger de la gestion de la mémoire de méthodes, mais DOM liaisons pour les autres langues (surtout en C ou C++) peut exiger d'un tel soutien. Ces extensions seront de la responsabilité de ceux adaptation de l'API DOM pour une langue spécifique, pas les DOM Groupe de Travail.

En d'autres termes: gestion de la mémoire est laissé à la mise en œuvre de la spécification DOM dans différentes langues. Vous devez regarder dans la documentation de la DOM implémentation en javascript afin de trouver une méthode pour supprimer un objet DOM à partir de la mémoire, qui n'est pas un hack. (Il y a cependant très peu d'informations sur le MDC site sur ce sujet).

une note sur jQuery#remove et jQuery#empty: à partir de ce que je peux dire, aucune de ces méthodes n'est rien d'autre que de retirer Objects de DOM nodes ou en supprimant des DOM nodes de la document. Ils ne supprimer Que, bien sûr, ne signifie pas qu'il n'y a pas de mémoire allouée à ces objets (même si elles ne sont pas dans le document plus).

Edit: Le passage ci-dessus est superflu puisque de toute évidence jQuery ne peut pas faire des merveilles et de travailler autour de la DOM de la mise en œuvre du navigateur utilisé.
- à partir de jQuery .remove() de l'API: "...outre les éléments eux-mêmes, tous lié aux événements et jQuery données associées avec les éléments sont supprimés. Pour supprimer les éléments sans supprimer les données et les événements, utiliser .detach() à la place."
- Vous avez dit que "d'après ce que je peux dire, aucune de ces méthodes n'est rien d'autre que la suppression d'Objets de nœuds DOM ou en supprimant des nœuds DOM à partir du document"..donc j'ai cité à partir de l'API qu'il n'a plus que cela. il a également supprimer tous les événements liés.
- Le contexte était d'allocation de mémoire. Mais bon, là, j'ai barré le passage sur jQuery.
InformationsquelleAutor FK82
8

Avez-vous enlevé les écouteurs d'événement? Que peut provoquer des fuites de mémoire.
- J'ai même le faire pour chaque élément $(this).unbind().html("").remove();
- Je pensais que jQuery supprime les gestionnaires d'événements automatiquement, lorsque vous faites de l'élément.remove(), non?
- il n'
- Je sais 🙂
InformationsquelleAutor Skilldrick

Le code ci-dessous n'a pas de fuite sur mon IE7 et les autres navigateurs:

<html>
<head></head>
<body>
    <a href="javascript:" onclick="addRemove(this)">add</a>
    <ul></ul>
    <script>
        function addRemove(a) {
            var ul = document.getElementsByTagName('UL')[0],
                li, i = 20000;
            if (a.innerHTML === 'add') {
                while (i--) {
                    li = document.createElement('LI');
                    ul.appendChild(li);
                    li.innerHTML = i;
                    li.onclick = function() {
                        alert(this.innerHTML);
                    };
                }
                a.innerHTML = 'remove';
            } else {
                while (ul.firstChild) {
                    ul.removeChild(ul.firstChild);
                }
                a.innerHTML = 'add';
            }
        }
    </script>
    </body>
</html>

Peut-être vous pouvez essayer de repérer quelques différences avec votre code.

Je sais que IE fuites beaucoup moins lorsque vous insérez d'abord le nœud du DOM avant de faire quoi que ce soit, par exemple: l'ajout d'événements ou de remplir ses innerHTML propriété.

InformationsquelleAutor Mic

1

Si vous avez de "post-fix" de fuite, et il doit le faire sans avoir à réécrire tout le code pour prendre des fermetures, des circulaires, des références, etc en compte, l'utilisation de Douglas Crockfords de Purge méthode avant de supprimer:

http://javascript.crockford.com/memory/leak.html

Ou de l'utilisation de cette fermeture-fix solution de contournement:

http://laurens.vd.oever.nl/weblog/items2005/closures/
- s'il vous plaît corriger le lien
InformationsquelleAutor Jens

Vous devez vous connecter pour publier un commentaire.