HTML畫布VS圖像內存使用

如果我通過創建一個畫布元素：HTML畫布VS圖像內存使用

var canvas = document.createElement('canvas');

，然後繪製它。如果我保留對該畫布的引用，將使用更多的內存，而不是將畫布內容轉換爲數據url，並使用該數據創建圖像元素並釋放對畫布的引用？

哪種內存消耗少？一個畫布元素或一個圖像元素，都具有相同的尺寸和相同的圖像數據？

來源

2012-12-22 Rob Evans

使用這個網站的測試頁：

<html> 
    <head> 
     <script type="text/javascript"> 
      window.onload = function() { 
       var c = document.getElementById("canvas"); 
       var ctx = c.getContext("2d"); 
       var img = new Image; 
       img.src = "http://blog.buzzbuzzhome.com/wp-content/uploads/2012/06/Canadian-Flag-canada-729711_1280_1024.jpg"; 
       ctx.drawImage(img, 0, 0); 
      } 
     </script> 
    </head> 
    <body> 
     <canvas id="canvas" width="1280" height="1024"></canvas> 
     <img src="http://blog.buzzbuzzhome.com/wp-content/uploads/2012/06/Canadian-Flag-canada-729711_1280_1024.jpg"> 
    </body> 
</html>

從谷歌的Chrome個人資料快照輸出內存如下：

Google Chrome -> Developer Tools -> Profiles -> Take Head Snapshot -> Class Filter:HTML

谷歌瀏覽器 - >開發者工具 - >概況 - >採取頭快照 - >類過濾器：HTML

畫布有一個較小的保留大小（img的132至152），但看看wh AT的從渲染圖像遺留揭示更多：

Class Filter:canvas

級過濾：帆布

恕我直言，你要支付的開銷渲染到畫布上大多數主流瀏覽器。

當您的參考資料被釋放並且您的最終內存使用率較低時，無論是否混亂得到清理，都是人們的猜想。

我意識到我沒有嚴格按照你的意圖去做，但我覺得並排比較會給你一些想法。

我想如果通過畫布加載圖片是唯一的出路，也許您在輸出最終結果之前執行一些操作，然後將其留在畫布中並嘗試廢除所有垃圾回收引用將會略微對客戶來說較便宜。

此測試僅在Google Chrome中完成，我無法驗證其他瀏覽器的任何內容。

親自試一試！

來源

2013-01-22 21:33:16 mattdlockyer

這是回答您的問題嗎？如果是這樣，請用複選標記標出。 – mattdlockyer

嗨，謝謝你的回答，我只是開始檢查結果數據。看起來，保留一個畫布最初稍微便宜一點，只要你釋放你的上下文引用等等。這是非常有趣的，因爲我期望相反的給定一個畫布在圖像上的額外功能。 –

有可能是在這裏沒有標識的額外腳印...我會仔細踩踏，仍然依靠經過嘗試和真正的img標籤。但無論如何，需要修改的地方最好將畫布留在那裏。 – mattdlockyer

HTML畫布VS圖像內存使用

回答

相關問題