Wie kann ich Speicherlecks beim Entfernen von Bildern im DOM verhindern?

Da ist ein bekannter Fehler im Webkit dass beim Entfernen eines Bildes aus dem DOM der damit verbundene Speicher nicht freigegeben wird.

Dies ist ein Problem mit Single-Page-Apps, die oft Bilder laden.

Verschiedene Lösungsvorschläge sind:

• Entfernen Sie das Attribut image src, bevor Sie das Bild aus dem DOM entfernen
• Stellen Sie image src auf „ “ ein, bevor Sie das Image aus dem DOM entfernen
• Legen Sie das Bild auf ein einzelnes Pixelbild fest, bevor Sie das Bild aus dem DOM entfernen
• Erstellen Sie eine begrenzte Anzahl von Bildelementen und recyceln Sie sie weiter

Die ersten 3 Methoden funktionieren bei mir nicht. Der Hauptnachteil beim Recycling von Bildelementen besteht darin, dass viel Code geschrieben werden muss, um dies zu verwalten. Ich lade neues HTML über AJAX, das Bilder enthalten kann, daher kenne ich nicht unbedingt die Anzahl der Bilder, die geladen werden.

Gibt es andere Problemumgehungen, um dieses Problem zu beheben?

Ich habe 3 verschiedene Arten von Ansätzen verwendet …

Zuerst. Habe eine Reihe von Bildern hinzugefügt und die Garbage Collection dem Browser überlassen.

Es wird definitiv Müll gesammelt, aber nach einer Weile wird sichergestellt, dass keine Notwendigkeit für die erstellten Bilder besteht.

Zweite. Verwendet ein data:URI-Muster für die src für Bilder.

var s = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

for (var i = 0; i < 100; i++){
    var img = document.createElement("img");
    img.src = s;
document.getElementById("myList1").appendChild(img);
setTimeout(function(){img = null;}, 1000);
}

Dies sah ähnlich aus, obwohl es für mich etwas besser war, als ich vor meinem Browser zusah und feststellte, dass weniger Speicher verwendet wurde und die Garbage Collection fast die gleiche wie oben war.

Dritte. Garbage Collection im Code durchgeführt.

var s = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

for (var i = 0; i < 100; i++){
    var img = document.createElement("img");
    img.src = "https://stackoverflow.com/questions/13859041/dot.png";  // or the other, both mean the same here.
    img.src = s;
document.getElementById("myList1").appendChild(img);
setTimeout(function(){img = null;}, 1000);
}

In dieser kurzen Testzeit war ich der Meinung, dass der letzte Ansatz besser funktionierte, da er den Speicherplatz fast sofort freigab, ohne abzuwarten, ob die referenzierten Bilder weiter benötigt werden.

Alles in allem, Sie verwenden die Garbage Collection besser selbst, wenn Sie unbedingt das Gefühl haben, dass etwas befreit werden muss.

Ein einfacher Bilderpool sollte es Ihnen ermöglichen, img-Elemente zur Wiederverwendung zu recyceln. Da Sie im Voraus nicht wissen, wie viele Bilder es insgesamt geben wird, erweitern Sie einfach die Poolgröße nach Bedarf.

So etwas sollte funktionieren:

    function getImg( id, src, alt ) {
        var pool = document.getElementById( 'image_pool' );
        var img = ( pool.children.length > 0 ) ? pool.removeChild( pool.children[0] ) : document.createElement( 'img' );
        img.id = id;
        img.src = src;
        img.alt = alt;
        return img;
    }
    function recycleImg( id ) {
        var img = document.getElementById( id );
        document.getElementById( 'image_pool' ).appendChild( img.parentNode.removeChild( img ) );
    }

Platzieren Sie irgendwo auf Ihrer Seite einen versteckten “image_pool”-Container, um die recycelten Bilder zwischen der Verwendung zu verstecken:

<div id="image_pool" style="display:none;"></div>

Rufen Sie dann jedes Mal, wenn Sie ein neues img-Element benötigen, auf:

document.getElementById( 'some_element_id' ).appendChild( getImg( 'my_image_id', 'images/hello.gif', 'alt_text' ) );

Und wenn Sie damit fertig sind:

recycleImg( 'my_image_id' );

jQuery-Alternative

    function getImg( id, src, alt ) {
        var img;
        if( $("#image_pool").children().length > 0 ) {
            return $("#image_pool img:first-child").attr( { 'id': id, 'src': src, 'alt': alt } ).detach();
        }
        return $( "<img />'" ).attr( { 'id': id, 'src': src, 'alt': alt } );
    }
    function recycleImg( id ) {
        $( "#" + id ).detach().appendTo( $("#image_pool") );
    }

Wenn Sie ein neues img-Element benötigen:

getImg( 'my_image_id', 'images/hello.gif', 'alt_text' ).appendTo( $( "#some_element_id" ) );

(Recycling funktioniert wie oben)

Versuchen Sie, das Javascript-DOM-Baumobjekt auf “null” zu setzen.

Suchen Sie zuerst mit so etwas wie der Chrome Developer Tool-Oberfläche das Objekt in der DOM-Baumhierarchie und untersuchen Sie es und finden Sie das Objekt, das die Binärdatei Ihres Bildes enthält.

Versuchen Sie, dieses Objekt auf null zu setzen, z var obj = null;.

Das sollte Javascript mitteilen, dass auf das untergeordnete Element nicht mehr verwiesen wird, und erzwingen, dass der Speicher des Objekts freigegeben wird.

Einstellung auf null war zumindest hier die Lösung. (Firefox 69)

In einem Projekt lade ich viele Bilder in Stapeln von 1 – 5 zum Vergleich. Bilder mit durchschnittlich 8-9 MB. Ohne Einstellung img Elemente zu null Nach dem Entfernen war der RAM-Aufbau erheblich und erschöpfte den verfügbaren Speicher.

Also abgeändert hiervon:

function clear (n) {
    while (n.lastChild) {
        n.removeChild(n.lastChild);
    return n;
};

dazu:

function clear (n) {
    let x;
    while (n.lastChild) {
        x = n.removeChild(n.lastChild);
        x = null;
    }
    return n;
};

Jetzt gibt es überhaupt keinen RAM-Aufbau.

Was ist mit dem Festlegen der Bilder als Hintergründe für Divs? Ich glaube, Flickr macht so etwas für seine mobile HTML5-App.