Question

如果我通过以下方式创建一个canvas元素：

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

然后画上它。如果我然后保持对该画布的引用将使用更多内存，而不是将画布内容转换为数据URL并使用该数据创建图像元素并释放对画布的引用？

哪个内存消耗较少？画布元素或图像元素，两个具有相同图像数据的相同尺寸？

Answer 1

使用此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配置文件快照的内存输出如下：

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

Google Chrome - ＆gt;开发人员工具 - ＆gt;个人资料 - ＆gt;拍头快照 - ＆gt;类过滤器：HTML

画布的保留尺寸较小（img的132到152），但是从渲染图像中看到剩下的内容会显示更多：

Class Filter:canvas

类过滤器：画布

恕我直言，你将支付在大多数主要浏览器中渲染到画布的开销。

当您的参考被释放并且您的最终内存使用率较低时，是否会清理混乱是否是任何人的猜测。

我意识到我并没有严格按照你的意图去做，但我觉得并排比较可以让你知道所涉及的内容。

我想如果通过画布加载图像是唯一的方法，也许你在输出最终结果之前执行一些操作，然后将它留在画布中并尝试使所有引用无效的垃圾收集将会略微减少对客户来说很贵。

此测试仅在Google Chrome中完成，我无法为其他浏览器验证任何内容。

亲自试试！

HTML Canvas与图像内存使用

1 个答案: