多畫布層內存泄漏

我想添加多個畫布層到DOM中，我發現，雖然添加很多圖層不是一個問題，如果我使用.fillText添加內容到圖層我突然得到很多內存常常會導致firefox崩潰並導致整臺機器停機。如果有人在那裏可以看到我以錯誤的方式做某件事，我會很感激你可能會給的任何建議 - 謝謝！多畫布層內存泄漏

下面的代碼 - 這是真實的簡化版本，但演示了這個問題 - 如果我增加循環運行次數，我會很快遇到問題。但是如果我註釋掉的代碼.fillText，我似乎可以添加許多層，但只要我嘗試.fillText他們我的內存使用穿過屋頂....

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

    <title>.</title> 
</head> 

<body> 
    <div id="canvasCont"></div> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

    <script> 

    $(function() { 
    var id = 1; 
    var top = 100; 

    for (i = 0; i < 5; i++) { 
     var left = 100; 

     for (a = 0; a < 5; a++) { 

      $('#canvasCont').append(
       "<canvas width='1300px' height='1300px' style='position: absolute; border: 1px solid black;' id='canvas_" + id + "'>" + 
        "Your browser does not support canvas" + 
       "</canvas>" 
      ); 

      var context = document.getElementById('canvas_' + id).getContext('2d'); 

      context.font = "10px Verdana"; 
      context.fillStyle = "red"; 
      context.fillText(
       id, 
       left, 
       top 
      ); 

      left += 55; 
      id++; 
     } 

     top = top + 55; 
    } 

} 
}); 
</script> 
</body> 
</html>

來源

2013-12-09 so1

使用fillText方法一很多顯示內存，因爲它是基於矢量的繪圖。（我建議使用圖像，如果你打算總是顯示相同的文字）

我還會補充說，你正在創建具有相當高分辨率的多畫布，這對你的機器來說可能很難。

來源

2013-12-09 14:32:57

感謝您的迴應！我使用.fillText的原因是我顯示動態值 - 我打算有一個間隔運行，它將通過AJAX從服務器檢索新值，然後清除與該值關聯的特定畫布層，然後再次應用.fillText與更新的值。不過謝謝！ – so1

最後，我發現this library.....paperJS解決了多個畫布層上多個實時數據點的性能問題。強烈推薦。

來源

2014-05-28 15:27:23 so1

多畫布層內存泄漏

回答

相關問題