Speicherverlust bei der Bearbeitung von Bildern in Chrome

9

Ich habe die folgenden 2 (riesigen!) Speicherverluste in Chrome festgestellt:

  1. Beim Bearbeiten des 'src' eines vorhandenen Bildes mit neuen Bytes
  2. Bei Verwendung von clone () zum Klonen eines Bildes

Beachten Sie, dass es im Internet Explorer KEINE Speicherverluste gibt!

Einige Hintergrundinformationen: Ich arbeite an einem Projekt, bei dem eine externe Kamera einen Live-Feed von Bildern bereitstellt (sagen wir 100 Bilder pro Sekunde).

Die wichtigsten 3 Funktionen des Projekts sind:

  1. Live-Feed abspielen
  2. Live-Feed aufnehmen
  3. zeigt aufgezeichneten Feed

Sie können den folgenden eigenständigen Code herunterladen (einfach als "leak.html" speichern und ausführen) und selbst sehen:

%Vor%

Dieser Beispielcode nimmt ein statisches Bild (eines Stuhls) und ändert es zufällig in jedem Bild (nur um meinen echten Kamera-Feed zu simulieren).

Bei den ersten 1000 Bildern wird das Bild angezeigt, und die letzten 10 Bilder werden in einem zyklischen Array gespeichert. Von nun an werden nur die 10 zuletzt aufgenommenen Bilder (in einer Schleife) angezeigt.

(Offensichtlich ist mein wirkliches Projekt viel komplizierter, ich habe es nur vereinfacht, um das Problem zu veranschaulichen).

Die Frage ist - schlagen Sie bitte einen alternativen Weg (vorzugsweise - basierend auf dem mitgelieferten Quellcode) vor, um genau die gleiche Funktionalität zu erreichen, ohne einen Speicherverlust in Chrome zu verursachen.

PS 1:

In Chrom habe ich die folgenden 2 Fehler gefunden, die NICHT wirklich behoben wurden (Beweise - mein Code ist noch immer undicht ...):

  1. "die Manipulation von img src über Javascript führt zu einem massiven Speicherverlust" - Ссылка
  2. "Die Speicherauslastung steigt bei Änderung von img.src unendlich an" - Ссылка

PS 2:

Ich bin mir voll und ganz der bestehenden, ähnlichen Fragen im Stackoverflow bewusst und habe viele Versuche unternommen, aber keiner von ihnen hat mir geholfen, mein Problem zu lösen:

  1. Die schnelle Aktualisierung des Images mit Daten-URI führt zum Caching, Speicherleck
  2. Canvas sogar Img essen RAM und CPU
  3. Bild mit einem neuen Bild gleichzeitig aktualisieren URL
  4. Einstellung von img.src auf dataUrl Leaks Memory
  5. Speicherverlust beim Laden von Bildern mit settimeout von javascript

Einige Versuche, die ich gemacht habe, zum Beispiel:

  • Um sicherzustellen, dass der Cache nicht die Ursache ist, arbeite ich im Inkognito-Modus von Chrome, daher ist Cache hier nicht relevant.
  • Anstatt das Byte-Array als src zu setzen, habe ich versucht, Blob-URLs zu verwenden (aber ein ähnliches Leck tritt immer noch auf):
    • img.src = window.URL.createObjectURL (neuer Blob ([bytes.buffer], {type: "image / jpeg"}));
  • Ich habe versucht, das Bild in einen iframe zu bringen und es alle X Frames neu zu laden: das hilft teilweise, aber es ist praktisch unmöglich für mich, diese "Problemumgehung" zu verwenden.

* UPDATE 29 / Jan *

Ich habe die folgenden Zeilen ersetzt:

%Vor%

Mit:

%Vor%

und das Leck ist das gleiche.

= & gt; Also ich bin unten auf "nur" 1 Fehler, der eine Abhilfe (an 2 Stellen) benötigt: Leck, wenn Sie den src eines Bildes redigieren.

    
o_c 23.01.2014, 13:37
quelle

1 Antwort

1

Ich hatte das gleiche Problem. Die einzige Problemumgehung, die ich fand, war, die Anzahl der neuen Image () zu reduzieren, die verwendet werden sollten (idealerweise eine):

%Vor%

Beachten Sie, dass Bilder in Serie geladen werden. Wenn Sie 2 Bilder parallel laden möchten, müssen Sie 2 ImageLoader instanziieren.

    
gtournie 10.10.2014 10:22
quelle