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图像内存使用

回答

相关问题