2013-10-10 23 views
8

Aşağıda, bir img etiketinin src'si farklı dataUrls olarak ayarlandığında, belleği sızdırdığını gösteren basit bir sınama durumu oluşturdum. Src başka bir şeye dönüştükten sonra görüntü verilerinin asla boşaltılmayacağı anlaşılıyor.Veriler için img.src ayarlanıyorUrl Leaks Memory

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Leak Test</title> 
    <script type="text/javascript"> 
     canvas = null; 
     context = null; 
     image = null; 
     onLoad = function(event) 
     { 
     canvas = document.getElementById('canvas'); 
     context = canvas.getContext('2d'); 
     image = document.getElementById('image'); 
     setTimeout(processImage, 1000); 
     } 

     processImage = function(event) 
     { 
     var imageData = null; 
     for (var i = 0; i < 500; i ++) 
     { 
      context.fillStyle = "rgba(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.random() +")"; 
      context.fillRect(0, 0, canvas.width, canvas.height); 
      imageData = canvas.toDataURL("image/jpeg", .5); 
      image.src = imageData; 
     } 
     setTimeout(processImage, 1000); 
     } 
    </script> 
    </head> 
    <body onload="onLoad(event)"> 
    <canvas id="canvas"></canvas> 
    <img id="image"></img> 
    </body> 
</html> 

Bu html sayfasını yüklerseniz, RAM kullanımı zamanla oluşur ve hiçbir zaman temizlenmez. Bu sorun çok benzer: Rapidly updating image with Data URI causes caching, memory leak. Bu bellek sızıntısını önlemek için yapabileceğim bir şey var mı?

+0

Bu tarayıcı nedir? Bir sorun olup olmadığını kontrol edebilirsin. GC, tarayıcı tarafından dahili olarak ele alındığından, tek yapmanız gereken, mantığı yeniden yazmaktır. – K3N

+0

Bu, hem Chrome'da hem de Firefox'ta gerçekleşir, dolayısıyla, teknik özelliklere veya bir şeye göre olduğunu farz ediyorum. –

+0

Henüz hatayı düzelttiler mi? – BrightIntelDusk

cevap

8

Bu konuyla ilgili bir çalışma yaptık. Hafıza bloat sadece image.src değiştirildiği zaman olur, bu yüzden tamamen Image nesnesini atlamıştım. Bunu dataUrl alarak, onu ikili (https://gist.github.com/borismus/1032746) dönüştürerek ve sonra jpg.js (https://github.com/notmasteryet/jpgjs) kullanarak ayrıştırarak yaptım. Jpg.js'yi kullanarak görüntüyü tuvalime geri kopyalayabilirim, böylece Görüntü öğesi tamamen bybassed ve böylece src özniteliğini ayarlama ihtiyacını ortadan kaldırır.

+1

Beni yönlendirecek örnek kodunuz var mı? Açıkladığınız gibi bir şeyler uygulamaya çalışıyorum ve açıkçası jpg.js. – JayhawksFan93

+0

@ JayhawksFan93, [https://github.com/notmasteryet/jpgjs/blob/master/example.html](https://github.com/notmasteryet/jpgjs/blob/master/example.html] adresine bakın. Görüntünüz JPEG biçiminde ise, 'decodeImage' yöntemine yalnızca anahtarın _jpeg_ bölümü ile gereksinim duyarsınız. – Osi

+0

Benzer bir şey yaşıyorum. Bir video görüntülemek için 'canvas' üzerinde art arda drawImage' kullanıyorum. Hafızanın hemen tırmanmaya başladığını görüyorum. OP'inde etiketli bir tuvalin olduğunu fark ettim. Bu tuval üzerinde çalışacak mı yoksa sadece öğesinde mi çalışacak? – Ronnie

1

Ayrıca bu sorunu yaşıyorum ve bir tarayıcı hatası olduğuna inanıyorum. Bunu FF ve Chrome'da da görüyorum. En azından Chrome'un bir kez düzeltilmiş benzer bir hatası vardı. Sanırım gitti ya da tamamen gitmedi. Img.src'yi benzersiz görüntüye tekrar tekrar ayarladığımda bellekte sürekli bir artış görüyorum. Biraz kilo vermek istiyorsanız, Chromium ile bir hata yaptım. https://code.google.com/p/chromium/issues/detail?id=309543&thanks=309543&ts=1382344039 (Hata tetikleme örneği her seferinde yeni ve benzersiz bir görüntü oluşturmaz, ancak en azından yüksek olasılıkla yapar)

+0

Sorunu yıldızla işaretledi. Teşekkürler! Ayrıca, javascript kullanarak hatanın etrafında çalışabildiğimi de unutmayın, ancak ideal olandan daha azdır, çünkü tarayıcının ele almasına izin vermekten çok daha fazla CPU gerektirir. –

+0

Harika, teşekkürler. Çözümünüzü kaydettim. Güzel ve oldukça yaratıcı :) Bu geçici çözümlerin bugün mümkün olduğu kadar güzel, ama yine de görüntü olarak sıradan bir şey gibi basit bir şeyde başarısız olabileceğimiz bir utanç. – distributed