HTML Canvas与图像内存使用
Rob*_*ans 3 memory image html5-canvas
如果我通过以下方式创建canvas元素:
var canvas = document.createElement('canvas');
然后画上它.如果我然后保持对该画布的引用将使用更多内存,而不是将画布内容转换为数据URL并使用该数据创建图像元素并释放对画布的引用？
哪个内存消耗更少？画布元素或图像元素,两个相同的尺寸具有相同的图像数据？
使用这个html测试页面:
<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>
Google Chrome配置文件快照的内存输出如下:
谷歌浏览器 - >开发人员工具 - >配置文件 - >拍摄快照 - >类过滤器:HTML
画布具有较小的保留大小(img的132到152),但是从渲染图像中看到剩下的内容会显示更多:
类过滤器:画布
恕我直言,你将支付在大多数主流浏览器中渲染到画布的开销.
当您的参考被释放并且您的最终内存使用率较低时,是否会清理混乱是任何人的猜测.
我意识到我并没有严格按照你的意图去做,但我觉得并排比较可以让你知道所涉及的内容.
我想如果通过画布加载图像是唯一的方法,也许你在输出最终结果之前执行一些操作,然后将它留在画布中并尝试取消所有垃圾收集的引用将稍微便宜一些客户.
此测试仅在Google Chrome中完成,我无法验证其他浏览器的任何内容.
亲自尝试一下!