销毁画布时如何使webkit释放画布上下文内存答案

【问题标题】：How to make webkit free canvas context memory when canvas is destroyed销毁画布时如何使webkit释放画布上下文内存
【发布时间】：2011-02-03 10:30:43
【问题描述】：

下面的代码似乎在 webkit（移动 safari 和 konqueror）上以相当惊人的速度泄漏内存。我意识到可以重写测试用例以重用画布而不是创建新画布，但我想知道为什么下面的内容也不起作用。任何见解将不胜感激。

<html>
<head>
<script>
function draw() { 
    var holder = document.getElementById("holder");
    holder.innerHTML = "<canvas id=cnv height=250 width=250>"; 
    var ctx = document.getElementById("cnv").getContext("2d");
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(Math.random()*100,Math.random()*100);
    ctx.stroke();
}

function start() {
    setInterval(draw, 100);
}
</script>
</head>
<body onload="start()">
<div id="holder"></div>
</body>
</html>

【问题讨论】：

标签： javascript iphone memory-leaks canvas webkit

【解决方案1】：

即使修改了图像 SRC，Webkit 也会出现此问题，因此如果在处理画布时也会发生这种情况，我不会感到惊讶。

Chrome 上存在一个错误（导致他们向 Webkit 填充了一个错误），我们希望这个问题能尽快得到修复，因为它使许多 Chrome 扩展程序无法使用。

参考资料 http://code.google.com/p/chromium/issues/detail?id=36142 https://bugs.webkit.org/show_bug.cgi?id=23372

无论如何，上述建议应该可以缓解这种情况。

【讨论】：

感谢您的链接 - 实际上我过去也遇到过图像内存泄漏问题，所以知道问题出在哪里很有趣。
这个潜在的 webkit 错误是在 09 年 1 月首次报告的。哎哟。当您的产品由于可能永远无法修复的浏览器错误而失败时，当然会令人沮丧。

【解决方案2】：

不要：

使用.innerHTML 创建<canvas> 元素
在每个区间创建<canvas>

做：

使用var cv = document.createElement('canvas'); cv.setAttribute('height', '250'); // ...
在某个初始化点缓存cv 的引用并重新使用它！！

    <script>
            var holder = document.getElementById("holder"),
            var cv = document.createElement('canvas');
                cv.setAttribute('id', 'cnv');
                cv.setAttribute('height', '250');
                cv.setAttribute('width', '250');
                holder.appendChild(cv);

            function draw() {                     
                var ctx = cv.getContext("2d");
                ctx.beginPath();
                ctx.moveTo(50,50);
                ctx.lineTo(Math.random()*100,Math.random()*100);
                ctx.stroke();
            }

            function start() {
                setInterval(draw, 100);
            }
    </script>

【讨论】：

我意识到每秒创建 10 次新元素效率低下 - 这是用于追踪内存泄漏的测试代码，而不是生产代码。也就是说，我可以控制内容，但不能控制正在加载它的应用程序，这使得重用现有画布有点不方便。即使使用惰性代码，WebKit 也不应该那样泄漏内存。