如何在畫布被破壞時製作webkit免費畫布上下文內存

以下代碼似乎以webkit（移動Safari & konqueror）的相當驚人的速度泄漏內存。我意識到測試用例可以被重寫來重新使用畫布而不是創建一個新的畫布，但是我想知道爲什麼下面的內容不起作用。任何洞察力將不勝感激。如何在畫布被破壞時製作webkit免費畫布上下文內存

<html> 
<head> 
<script> 
function draw() { 
    var holder = document.getElementById("holder"); 
    holder.innerHTML = "<canvas id=cnv height=250 width=250>"; 
    var ctx = document.getElementById("cnv").getContext("2d"); 
    ctx.beginPath(); 
    ctx.moveTo(50,50); 
    ctx.lineTo(Math.random()*100,Math.random()*100); 
    ctx.stroke(); 
} 

function start() { 
    setInterval(draw, 100); 
} 
</script> 
</head> 
<body onload="start()"> 
<div id="holder"></div> 
</body> 
</html>

來源

2011-02-03 Dan

這個問題發生在圖像SRC被修改，即使Webkit的，所以我不明白感到驚訝，如果發生這種情況處理的帆布時了。

Chrome上存在一個bug（這使得他們填補了Webkit的一個漏洞），我們希望這個問題很快就會得到解決，因爲它使得很多Chrome擴展無法使用。

引用 http://code.google.com/p/chromium/issues/detail?id=36142 https://bugs.webkit.org/show_bug.cgi?id=23372

無論如何，上述建議應該減少這一點。

來源

2011-02-03 11:21:52 Omiod

不要：

創建.innerHTML
的<canvas>元素創建每個間隔

。執行<canvas>：

使用var cv = document.createElement('canvas'); cv.setAttribute('height', '250'); // ...
緩存cv一些初始化點和重複使用的參考！

<script> 
      var holder = document.getElementById("holder"), 
      var cv = document.createElement('canvas'); 
       cv.setAttribute('id', 'cnv'); 
       cv.setAttribute('height', '250'); 
       cv.setAttribute('width', '250'); 
       holder.appendChild(cv); 

      function draw() {      
       var ctx = cv.getContext("2d"); 
       ctx.beginPath(); 
       ctx.moveTo(50,50); 
       ctx.lineTo(Math.random()*100,Math.random()*100); 
       ctx.stroke(); 
      } 

      function start() { 
       setInterval(draw, 100); 
      } 
    </script>

來源

2011-02-03 10:35:51 jAndy

+1，每100ms創建一個新的畫布看起來像是主要泄漏... – acm 2011-02-03 10:37:32

我意識到創建一個新元素每秒10次是低效的 - 這是測試代碼來追蹤內存泄漏，而不是生產代碼。也就是說，我可以控制內容，但不是加載它的應用程序，這使得重新使用現有畫布有點不方便。即使使用延遲代碼，WebKit也不應該像這樣泄漏內存。 – Dan 2011-02-03 16:20:26

如何在畫布被破壞時製作webkit免費畫布上下文內存

回答

相關問題